Този пост беше последно редактиран от szxiaxiaojun на 11.07.2019 г.
В ежедневната разработка на уеб проекти често се сблъскваме с показване на данни за структурата на дървото, които се получават от базата данни и се показват във формата на дърво. За удобство можем да напишем контрол на дървото между браузъри за JavaScript, който може да се използва повторно в бъдеще. Този раздел споделя саморазработен плъгин за JS дърво, който може да бъде изтеглен и използван директно за нуждаещи се приятели. Трябва да се реализира плъгинът за дърво (1) Автоматично да организираме данните в подчинени отношения, така че да не се налага да организираме връзката между началници и подчинени чрез ръчно добавяне на данни или получаване на данни от базата данни на фронтенда (2) Поддръжка на персонализирано дърво от директории за зареждане Поддръжка на зареждане на данни във формати XML и JSON (3) Реализиране на функцията за избор на дървесни възли (единичен избор, множествен подбор [каскаден подбор]). (4) Поддръжка на еднократно зареждане на големи данни 。。。。。。 Нека започнем да споделяме Tree плъгин, който написах: Този плъгин е базиран на Jquery и се нуждае от референции
Първо: Параметрът JSON обект на всеки дървесен възел в плъгина е показан по-долу nodeItem: функция () {
return {
nodecode: "", // nodecode
nodetext: "", // node text [node display text text]
nodetitle: "", // заглавие на възел [текст на възел за движение на мишка остарял дисплей]
supnodecode: "", // Код на по-горния възел [дефинирай кода на родителския възел, към който този възел принадлежи, и формирай подчинена връзка чрез този код]
nodeurl: "", // node URL представлява URL адреса на връзката, персонализиран от текущия възел
iconexpand: "", // Node Expand Icon [Икона, показана в дървото на директорията в персонализирано разширено състояние, ако е празна, се използва иконата по подразбиране]
iconcollapse: "" // Node Shrink Icon [Иконата се показва в възела на дървото на директорията в персонализирано състояние на свиване, ако е празна, се използва иконата по подразбиране]
}
} Второ: Три начина за зареждане на дървото с директории 1. loadJson(Json) Масив от възли на дървото на директорията на обекти JSON (завършен наведнъж) JSON форматът е масив от аргументи за всеки елемент на nodeItem обект
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) XML формат за възли (еднократно завършване)
Забележка: Използвайте XML string формат Обърнете внимание, че node tag 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 ч.
|
|
|
|
