Этот пост был последний раз отредактирован szxiaxiaojun 11.07.2019 11:20
В ежедневной разработке веб-проектов мы часто сталкиваемся с отображением данных по структуре дерева, которые получаются из базы данных и отображаются в форме дерева. Для удобства мы можем написать кроссбраузерный элемент управления деревом JavaScript, который можно будет использовать повторно в будущем. Этот раздел использует собственно разработанный плагин JS-дерева, который можно скачать и использовать напрямую для друзей, нуждающихся в помощи. Необходимо реализовать плагин дерева (1) Автоматически организовывать данные по подчинённым отношениям, чтобы не нужно было организовывать отношения между начальниками и подчинёнными вручную добавляя данные или получая данные из базы данных на фронтенде (2) Поддержка пользовательского дерева каталогов загрузки Поддержка загрузки данных в форматах XML и JSON (3) Реализовать функцию выбора узлов дерева (одиночный выбор, множественный выбор [каскад выбора]). (4) Поддержка одноразовой загрузки больших данных 。。。。。。 Давайте начнём делиться плагином Tree, который я написал: этот плагин основан на Jquery и нуждается в ссылках
Во-первых: параметр JSON-объект каждого узла дерева в плагине показан ниже nodeItem: функция () {
return {
nodecode: "", // nodecode
nodetext: "", // текст узла [текст отображения узла]
nodetitle: "", // заголовок узла [устаревающий дисплей текста для движения мыши]
supnodecode: "", // Код верхнего узла [определите код родительского узла, к которому принадлежит этот узел, и формируйте подчинённое отношение через этот код]
nodeurl: "", // URL узла представляет URL-адрес ссылки, настраиваемый текущим узлом
iconexpand: "", // Node Expand Icon [Иконка, отображаемая в узле дерева каталогов в настроенном расширенном состоянии, если пустая, используется иконка по умолчанию]
iconcollapse: "" // Значок уменьшения узла [Иконка отображается в узле дерева каталогов в пользовательском уменьшительном состоянии, если пусто, используется иконка по умолчанию]
}
} Во-вторых: три способа загрузки дерева каталогов 1. loadJson(Json) Массив узлов дерева каталогов JSON объектов (завершён одновременно) Формат JSON представляет собой массив аргументов для каждого элемента объекта nodeItem
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) формат XML-строк данных узлов (одноразовое завершение)
Примечание: Используйте формат строки XML Обратите внимание, что тег узлов Name:nodecode nodetext и т. д. не разрешается менять, поскольку программа получается напрямую с помощью этого имени
<root>
<item> // Каждый узел содержит несколько значений данных
<nodecode><![CDATA[значение кодирования узла]]></nodecode>
<nodetext><![CDATA[текст имени узла]]]></nodetext>
<nodetitle><![CDATA[движение мыши узлом в тексте подсказки отображения]]></nodetitle>
<supnodecode><![CDATA[кодирование родителя узла]]></supnodecode>
<nodeurl><![CDATA[Адрес связи с узлом]]></nodeurl>
<iconexpand><![CDATA[Показать путь иконки при расширении узла]]></iconexpand>
<iconcollapse><![CDATA[Показать путь иконки при уменьшении узла]]></iconcollapse>
</item> ... ...
</root>
3. Вручную добавлять элементы узлов по одному (два шага для завершения) с помощью метода addNodeItem(nodeItem) с помощью плагин-объектов
Вы можете создать дерево, вызвав этот метод вручную через объект плагина makeTree().
В-третьих: Метод событий для реорганизации отношений между подчинёнными и подчинёнными внутри дерева каталогов. С помощью этого метода мы можем решить проблему, что наш фронтенд больше не обязан различать в зависимости от отношений между подчинёнными и подчинёнными. В-четвёртых: вышеописанное — лишь краткое введение в основные методы загрузки и реорганизации Tree. Ниже мы опубликуем полный код плагина JS с подробными комментариями в коде Функции плагинов: проверка, одиночка, расширение, складывание, показывание/скрытие соединения узлов, поддержка вставки узлов, удаление узлов, настройка иконок узлов, настройка выбора узлов, получение узлов выбора дерева каталогов (поддержка XML, JSON и др.) Меню правой кнопкой мыши (пока не поддерживается, так как нужно использовать слой всплывающего окна, эта функция блокируется и удаляется) Поддержка кликов по узлам, двойным кликам, событиям изменения выбора узла и т.д. Финальный эффект отображения Загрузка вложения:
Tree_Demo.rar
(54.71 KB, Количество скачиваний: 1)
| 
Опубликовано 11.07.2019 11:20:12
|
|
|
|
