Сортируемая древовидная таблица

Question

Всем Доброго дня! Делаю пет проект, нужно выводить структуру сотрудников в древовидном формате. Я использую для этого табличное представление django-tables2. Далее нужна возможность сортировки drug and drop. Нашел SortableJS, подключил, но при перетаскивании не знаю как сделать, что бы учитывалась структура родитель-потомок. Если у нода есть потомки, тянем вместе с ними. Если у нода потомков нет, соответвено только он. У SortableJS есть опция Nested, но как ее прикрутить к своей существующей таблице не знаю. Пробовал по всякому, но корректно она отрабатывает только со структурами на div тегах. Собственно я в тупике). Подскажите пожалуйста, что можно предпренять, может быть выбрать другой инструмент?

Вот что есть на данный момент:

var el = document.getElementById('groups');
var sortable = Sortable.create(el);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SortableJS Issue</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
</head>
<body>
  
<div class="container-fluid" style="padding-left:10px, padding-right:10px">
    <div class="table-container">
        <table class="table table-bordered">
            <thead class="table table-bordered">
                <tr>
                    <th class="orderable"
                        style="cursor: pointer">First Name</th>
                    <th class="orderable"
                        style="cursor: pointer">Last Name</th>
                    <th class="orderable"
                        style="cursor: pointer">Position At Work</th>
                    <th class="orderable"
                        style="cursor: pointer">Hire Date</th>
                </tr>
            </thead>
            <tbody id="groups">
                <tr data-id="60827" class="even">
                    <td style="padding-left:15px; cursor:pointer;">Matthew</td>
                    <td style="padding-left:15px; cursor:pointer;">Meyers</td>
                    <td style="15">CEO 0</td>
                    <td>Jan. 15, 2024</td>
                </tr>
                <tr data-id="60867" class="odd">
                    <td style="padding-left:30px; cursor:pointer;">Patricia</td>
                    <td style="padding-left:30px; cursor:pointer;">Schultz</td>
                    <td style="30">Deputy CEO 0</td>
                    <td>Jan. 15, 2024</td>
                </tr>
                <tr data-id="61028" class="even">
                    <td style="padding-left:45px; cursor:pointer;">Patricia</td>
                    <td style="padding-left:45px; cursor:pointer;">Smith</td>
                    <td style="45">Head Of Department 39</td>
                    <td>Jan. 15, 2024</td>
                </tr>
                <tr data-id="68868" class="odd">
                    <td style="padding-left:60px; cursor:pointer;">Linda</td>
                    <td style="padding-left:60px; cursor:pointer;">Moore</td>
                    <td style="60">Deputy HOD 199</td>
                    <td>Jan. 15, 2024</td>
                </tr>

            </tbody>
        </table>
    </div>
</div>
  <script src="//cdn.jsdelivr.net/npm/[email protected]/Sortable.js"></script>
</body>
</html>

БЛОГ НА HUSL

Сортируемая древовидная таблица

Ответы (0 шт):