Această postare a fost editată ultima dată de szxiaxiaojun la 2019-7-11, 11:20
În dezvoltarea zilnică a proiectelor web, întâlnim adesea afișarea datelor despre structura arborilor, care sunt obținute din baza de date și afișate sub forma unui arbore. Pentru comoditate, putem scrie un control arbore cross-browser pentru JavaScript care poate fi reutilizat în viitor. Această secțiune împărtășește un plugin de arbore JS dezvoltat de tine însuți, care poate fi descărcat și folosit direct pentru prietenii care au nevoie. Pluginul arbore trebuie implementat (1) Organizarea automată a datelor în relații subordonate, astfel încât să nu fie nevoie să organizăm relația dintre superiori și subordonați prin adăugarea manuală de date sau obținerea datelor din baza de date de pe front-end (2) Suportul pentru încărcarea personalizată a arborelui directorului Suport pentru încărcarea datelor în formate XML și JSON (3) Realizarea funcției de selectare a nodurilor arbore (selecție unică, selecție multiplă [selecție în cascadă]). (4) Suportarea încărcării unice a big data 。。。。。。 Să începem să împărtășim un plugin Tree pe care l-am scris: Acest plugin se bazează pe Jquery și are nevoie de referințe
În primul rând: Parametrul obiect JSON al fiecărui nod arbore din plugin este prezentat mai jos nodeItem: function () {
return {
cod de nod: "", // cod de nod
Nodetext: "", // Node Text [Node display text]
nodetitle: "", // node title [text nod pentru mișcarea mouse-ului afișare învechită]
supnodecode: "", // Cod nod superior [definiți codul nodului părinte căruia îi aparține acest nod și formați o relație subordonată prin acest cod]
nodeurl: "", // URL-ul nodului reprezintă adresa URL a linkului personalizată de nodul curent
iconexpand: "", // Pictograma Node Expand [Pictogramă afișată în nodul arbore de director în starea personalizată extinsă, dacă este goală, se folosește pictograma implicită]
iconcollapse: "" // Node Shrink Icon [Pictogramă afișată în nodul arborelui de director într-o stare personalizată de micșorare, dacă este goală, se folosește pictograma implicită]
}
} Al doilea: Trei moduri de a încărca arborele de directoare 1. loadJson(Json) Matricea nodurilor arbore al directorului de obiecte JSON (finalizat odată) Formatul JSON este un tablou de argumente pentru fiecare element al unui obiect nodeItem
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) XML string format date de nod (completare unică)
Notă: Folosiți formatul de șir XML Rețineți că node tagName:nodecode nodetext etc. nu pot fi schimbate, deoarece programul este obținut direct folosind acest nume
<root>
<item> // Fiecare nod conține mai multe valori de date
<nodecode><![CDATA[valoare de codare a nodului]]></nodecode>
<nodetext><![CDATA[nume nod text]]]></nodetext>
<nodetitle><![CDATA[mișcarea mouse-ului nodului în textul afișării]]></nodetitle>
<supnodecode><![CDATA[Codare părinte nod]]></supnodecode>
<nodeurl><![CDATA[Adresa Linkului Asociat Nodului]]></nodeurl>
<iconexpand><![CDATA[Arată calea pictogramei când nodul s-a extins]></iconexpand>
<iconcollapse><![CDATA[Afișează calea pictogramei când nodul se micșorează]]></iconcollapse>
</item> ... ...
</root>
3. Adaugă manual elemente de nod unul câte unul (doi pași pentru finalizare) prin metoda addNodeItem(nodeItem) prin metoda obiectelor plug-in
Poți crea un arbore apelând manual această metodă prin pluginul obiect makeTree().
În al treilea rând: Metoda evenimentelor pentru reorganizarea relației dintre subordonați și subordonați în cadrul arborelui de director Prin această metodă, putem rezolva problema că front-end-ul nostru nu mai trebuie să distingă în funcție de relația dintre subordonați și subordonați. În al patrulea rând: Cele de mai sus sunt doar o scurtă introducere a principalelor metode de încărcare și reorganizare ale Tree. Mai jos vom posta codul complet al pluginului JS cu comentarii detaliate în cod Funcții de plug-in: verificarea, single-ul, extinderea, pliarea, afișarea/ascunderea conexiunii nodurilor, suportarea inserării nodurilor, ștergerea nodurilor, personalizarea pictogramelor de noduri, setarea selecției nodurilor, obținerea nodurilor de selecție a arborelui de director (suport XML, JSON etc.) Meniul cu click dreapta (nu este suportat momentan, deoarece trebuie folosit stratul pop-up, această funcție este blocată și eliminată) Suportă click-ul nodurilor, dublu click, evenimente de schimbare a selecției nodurilor etc Efectul final de afișare Descărcare atașament:
Tree_Demo.rar
(54.71 KB, Numărul de descărcări: 1)
| 
Postat pe 11.07.2019 11:20:12
|
|
|
|
