Пример простого Drag and Drop на Flask - Записки IT Директора

Если вам нужно вывести таблицу, которую можно было бы редактировать с помощью перетаскивать, то простой код ниже даст вам понимание, как это может выглядеть.

Внизу простой пример, как с помощью Python, Flask, можно построить таблицу, в которой возможно перетаскивание элементов и отправка результирующего массива для последующей обработки.

Код Python ниже. Нужно 2 файла: один сам python скрипт, второй html шаблон.

Исходник работающего примера можно скачать на github.com тут.

from flask import Flask, render_template, request
# from jinja2 import Environment

app = Flask(__name__)
app.jinja_env.globals['enumerate'] = enumerate

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        new_order = request.form.getlist('new_order[]')
        # Save the new sorted array here
        return 'Array saved successfully'
    else:
        article_image = [
              "3526_nowodvorski",
              "2997_nowodvorski",
              "TL1179H-04BK_toplight",
              "TL1136-3H_toplight",
              "E4-07-G-LMP-O-23-CRL-E4-07-CH-DN_maytoni",
              "3641_nowodvorski",
              "450018103_de_city",
              "69014-5H_globo_new",
              "68410-5_globo_new",
              "2996_nowodvorski",
              "3528_nowodvorski",
              "450019805_de_city",
              "E4-07-G-LMP-O-32_maytoni",
              "A4900PL-3SS",
              "3642_nowodvorski",
              "275-107-03_velante",
              "3513/3_lumion",
              "E4-07-G-LMP-O-18-CRL-E4-07-GB-DN_maytoni",
              "Carina E 1.1.5 GB_arti_lampadari",
              "V4255-1/3_vitaluce",
              "318014705_de_city",
              "2998_nowodvorski",
              "TL5670D-03WG_toplight",
              "E3-07-H-LMP-O-33_maytoni",
              "450019703_de_city",
              "TL2670X-03WC_toplight",
              "287/3pf-blackchrome_idlamp",
              "GRLSP-8063_lussole",
              "V3252/3PL_vitaluce",
              "V3946-0/3PL_vitaluce",
              "5620311_britop",
              "CL113135_citilux",
              "69017-3H_globo_new",
              "A4530LM-5AB",
              "CL434131_citilux"
        ]  # Your original array
        return render_template('index.html', article_image=article_image)


if __name__ == '__main__':
    app.run()

main.py

Файл index.hmtl

<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.css">
</head>
<body>
    <table id="sortable-table">
        <thead>
            <tr>
                <th width="120px">Index</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            {% for index, value in enumerate(article_image) %}
            <tr data-index="{{ index }}">
                <td>{{ index }}</td>
                <td>{{ value }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>
    <script>
        Sortable.create(document.getElementById('sortable-table').tBodies[0], {
            onEnd: function (evt) {
                var table = evt.item.closest('table');
                var rows = Array.from(table.tBodies[0].querySelectorAll('tr'));
                var newOrder = rows.map(function (row) {
                    return row.dataset.index;
                });
                console.log(newOrder); // Print the new order to the console (you can send it to the server for saving)
            }
        });
    </script>
</body>
</html>

index.html

Добавить комментарий