ReactJS сортируемая настройка дерева dnd - PullRequest
Новая
       22

ReactJS сортируемая настройка дерева dnd

0 голосов
/ 06 июля 2019

Снова отреагируйте на новичка.

У меня есть и страница администратора для форума.Это древовидная структура с потенциально бесконечной глубиной, упорядоченная по полю order_id.Я могу получить его из API либо в виде дерева (с полем массива children, содержащим дочерние элементы каждого узла), либо в виде плоского массива с ancestry (строка, которая содержит весь путь к узлу, разделенный/) и поле parent_id.Мне нужно иметь возможность перемещать их, расширять и сворачивать поддеревья и иметь возможность добавлять узлы в любом месте.

Теперь у меня есть несколько вопросов:

  1. Естьесть хорошая готовая библиотека пользовательского интерфейса, чтобы можно было перетаскивать их, чтобы переставить?Я нашел это: https://github.com/frontend-collective/react-sortable-tree, но я не могу заставить его не иметь рамку с ограниченной высотой, и настройка этих тем выглядит слишком сложной.

  2. Если ячтобы сделать это с нуля, используя Reaction-DDD, каков более эффективный способ работы с этим деревом - иметь его в виде дерева (как добавить / обновить узлы?) или сохранить его в плоском виде и построить дерево при рендеринге (легко)управлять коллекцией, но усложняет логику рендеринга и сортировки).

1 Ответ

1 голос
/ 07 июля 2019

Звучит как сложная и интересная проблема. Если библиотека не может делать то, что вы хотите, это стилистически, то вам придется создавать ее с нуля.

Я бы сохранил все ваши объекты узлов в массиве Array со свойством children, которое содержит ссылку на все его дочерние элементы; вы можете использовать их order_id в качестве ссылки, если он гарантированно уникален.

Я бы также сохранил order_id родительского узла, так как это поможет при манипулировании деревом. 

Nodes = [
  {order_id: 1, name:"order1", children_ids:[2,3], parent_id: 0},
  {order_id: 2, name:"order2", children_ids:[], parent_id: 1},
  {order_id: 3, name:"order3", children_ids:[], parent_id: 1},
]

Вам нужно будет построить дерево при рендере, это может быть извращение мозга, но это более чем выполнимо с небольшой работой.

Когда вы добавляете новый узел, вам нужно будет обновить родительский и дочерний узлы его нового места в дереве.

Когда вы переставляете узел, вам нужно подойти к родителю и удалить его из дочерних узлов. Вам также нужно будет добраться до его детей и установить их родителей на старого родителя переставляемого узла. Это удаляет узел из дерева. Затем добавьте переставленный узел в дерево.

Любая ваша манипуляция будет включать в себя манипулирование родителем и потомками этого узла - вот почему я рекомендую хранить и детский, и родительский идентификаторы. Это избавляет вас от необходимости выполнять слишком много обходов деревьев, что неэффективно в вычислительном отношении.

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

Первый шаг - интеграция с реагировать на ошибки; сделать каждый узел перетаскиваемым. Когда вы перетаскиваете его на другой узел для перестановки, вы запускаете обработчик перестановки.

Удачи.

...