Цей допис востаннє редагувався szxiaxiaojun 2019-7-11 11:20
У щоденній розробці веб-проєктів ми часто стикаємося з відображенням даних структури дерева, які отримані з бази даних і відображаються у формі дерева. Для зручності ми можемо написати кросбраузерний деревовий контроль JavaScript, який можна буде повторно використовувати в майбутньому. Цей розділ має власний плагін JS-дерева, який можна завантажити та використовувати безпосередньо для друзів, які потребують допомоги. Потрібно реалізувати деревний плагін (1) Автоматично організовувати дані у підлеглі відносини, щоб не доводилося організовувати відносини між керівниками та підлеглими шляхом ручного додавання даних або отримання даних із бази даних на фронтенді (2) Підтримка власного дерева каталогів завантаження Підтримка завантаження даних у форматах XML та JSON (3) Реалізувати функцію вибору вузлів дерева (одиничний вибір, множинний вибір [каскадний вибір]). (4) Підтримка одноразового завантаження великих даних 。。。。。。 Давайте почнемо ділитися плагіном Tree, який я написав: цей плагін базується на Jquery і потребує посилань
По-перше: параметр JSON-об'єкт кожного вузла дерева в плагіні показаний нижче nodeItem: функція () {
return {
nodecode: "", // nodecode
nodetext: "", // node text [node display text]
Nodetitle: "", // Node title [Node text for move mouse obsolete display]
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
|
|
|
|
