Как правильно учитывать иерархию наследования при создании отсортированного дерева в виде таблицы?

Question

Brooklyn

django , javascript

Как правильно учитывать иерархию наследования при создании отсортированного дерева в виде таблицы?

Как можно реализовать сортировку с помощью drug and drop в древовидной структуре сотрудников, используя библиотеку SortableJS вместе с табличным представлением django-tables2? Как можно настроить SortableJS, чтобы учитывалась структура родитель-потомок при перетаскивании? Я пробовал использовать опцию Nested у SortableJS, но не могу понять, как ее интегрировать со своей существующей таблицей. Может быть, есть другие инструменты, которые лучше подходят для этой задачи? Вот примерная структура сотрудников и мой текущий код: https://jsbin.com/geqonosaqa/edit?html,js,output

1 февраля 2024 г. 14:12

Ответы на вопрос 1

Похожие вопросы

Answer 1

Когда вы работаете с иерархией, вам нужно убедиться, что при сортировке детальные элементы (потомков) следуют за родительским элементом и остаются в той же подгруппе под ним. Для работы с древовидной структурой и SortableJS, вы должны использовать опцию `group: { name: 'nested' }` и `fallbackOnBody: true`, чтобы разрешить вложенные списки. Кроме того, если вы используете таблицу, вероятно, вам придется работать с тегом `<tbody>`, поскольку `<table>`, `<thead>`, `<tbody>`, и `<tfoot>` не могут быть напрямую перенесены.

SortableJS хорошо подходит для работы с списками, но табличные данные могут быть немного сложнее, потому что вы должны обрабатывать перемещение строк (`<tr>`) между различными `<tbody>`, представляющими различные уровни иерархии.

Ниже приведен пример, как можно модифицировать ваш код для работы с вложенной структурой и SortableJS. Помните, что это упрощенный пример и вы должны его адаптировать под ваши конкретные требования.

HTML:
```html
<!-- Подключаем SortableJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js"></script>

<!-- Таблица с отступами для визуализации иерархии -->
<table id="staff-table">
  <tbody id="root" class="sortable">
    <!-- Родительский элемент -->
    <tr data-id="1" class="sortable-item">
      <td>Элла Хэндсон</td>
    </tr>
    <tbody id="child-of-1" class="sortable">
      <!-- Детские элементы -->
      <tr data-id="2" class="sortable-item">
        <td>Джеймс Симпсон</td>
      </tr>
      <!-- Вложенный детский элемент -->
      <tbody id="child-of-2" class="sortable">
        <tr data-id="3" class="sortable-item">
          <td>Лили Эванс</td>
        </tr>
        <!-- Еще более вложенный элемент -->
        <tr data-id="4" class="sortable-item">
          <td>Джек Спарроу</td>
        </tr>
      </tbody>
    </tbody>
    <!-- Другой родительский элемент -->
    <tr data-id="5" class="sortable-item">
      <td>Боб Марли</td>
    </tr>
  </tbody>
</table>
```

JavaScript:
```javascript
// Инициализация Sortable для корневого элемента
var rootSortable = new Sortable(document.getElementById('root'), {
  group: 'nested',
  animation: 150,
  fallbackOnBody: true,
  swapThreshold: 0.65,
  // Обработчик, который будет вызван после каждого сортировки
  onEnd: function (evt) {
    // Тут логика для обновления серверного состояния ...
  }
});

// Инициализация Sortable для вложенных списков
var nestedSortables = [].slice.call(document.getElementsByClassName('sortable'));
for (var i = 0; i < nestedSortables.length; i++) {
  new Sortable(nestedSortables[i], {
    group: 'nested',
    animation: 150,
    fallbackOnBody: true,
    swapThreshold: 0.65,
    onEnd: function (evt) {
      // Тут логика для обновления серверного состояния ...
    }
  });
}
```

Чтобы интегрировать перетаскиваемую сортировку со структурой django-tables2, вам потребуется создать кастомный шаблон для таблицы, который будет использовать вложенные список или г