Tento príspevok naposledy upravil szxiaxiaojun 11.7.2019 o 11:20
Pri každodennom vývoji webových projektov sa často stretávame so zobrazením údajov o štruktúre stromu, ktoré sa získavajú z databázy a zobrazujú v tvare stromu. Pre pohodlie môžeme napísať stromový systém pre JavaScript naprieč prehliadačmi, ktorý bude možné v budúcnosti znovu použiť. Táto sekcia zdieľa vlastnoručne vyvinutý plugin JS stromu, ktorý si môžete stiahnuť a použiť priamo pre priateľov v núdzi. Je potrebné implementovať stromový plugin (1) Automaticky organizovať dáta do podriadených vzťahov, aby sme nemuseli organizovať vzťahy medzi nadriadenými a podriadenými manuálnym pridávaním dát alebo získavaním údajov z databázy na front-ende (2) Podpora vlastného stromu načítavacích adresárov Podpora načítavania dát vo formátoch XML a JSON (3) Realizovať funkciu výberu stromových uzlov (jeden výber, viacnásobný výber [kaskádový výber]). (4) Podpora jednorazového načítania veľkých dát 。。。。。。 Začnime zdieľať plugin Tree, ktorý som napísal: Tento plugin je založený na Jquery a potrebuje referencie
Po prvé: Parameter JSON objekt každého stromového uzla v plugine je zobrazený nižšie nodeItem: function () {
return {
nodecode: "", // nodecode
nodetext: "", // text uzla [text zobrazenia uzla]
nodetitle: "", // node title [text uzla pre zastaraný displej pohybu myši]
supnodecode: "", // Kód nadriadeného uzla [definujte kód rodičovského uzla, ku ktorému tento uzol patrí, a vytvorte podriadený vzťah prostredníctvom tohto kódu]
nodeurl: "", // URL node predstavuje URL adresu linky prispôsobenú aktuálnym uzlom
ikon expand: "", // Ikona rozšírenia uzla [Ikona zobrazená v adresárovom strome v upravenom rozšírenom stave, ak je prázdna, používa sa predvolená ikona]
iconcollapse: "" // Ikona zmenšenia uzla [Ikona zobrazená v adresárovom strome v vlastnom zmenšovacom stave, ak je prázdna, používa sa predvolená ikona]
}
} Po druhé: Tri spôsoby, ako načítať adresárový strom 1. loadJson(Json) pole uzlov adresárov objektov objektov JSON (dokončené jednoraz) Formát JSON je pole argumentov pre každý element objektu nodeItem
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) XML formát reťazca dát uzlov (jednorazové dokončenie)
Poznámka: Použite formát XML reťazcov Upozorňujeme, že node tagName:nodecode nodetext a podobne nie je možné meniť, pretože program sa priamo získava použitím tohto názvu
<root>
<item> // Každý uzol obsahuje viacero dátových hodnôt
<nodecode><![CDATA[hodnota kódovania uzla]]></nodecode>
<nodetext><![CDATA[text názvu uzla]]]></nodetext>
<nodetitle><![CDATA[node mouse move in display prompt text]]></nodetitle>
<supnodecode><![CDATA[Node parent encoding]]></supnodecode>
<nodeurl><![CDATA[Adresa spojeného uzla]]></nodeurl>
<iconexpand><![CDATA[Zobraziť ikonovú cestu pri rozšírení uzla]]></iconexpand>
<iconcollapse><![CDATA[Zobraziť ikonovú cestu, keď sa uzol zmenšuje]]></iconcollapse>
</item> ... ...
</root>
3. Manuálne pridávať položky uzlov jednu po druhej (dva kroky na dokončenie) metódou addNodeItem(nodeItem) pomocou plug-in objektov
Strom môžete vytvoriť manuálnym volaním tejto metódy cez plugin objekt makeTree().
Po tretie: Metóda udalostí na reorganizáciu vzťahu medzi podriadenými a podriadenými v adresárovom strome Touto metódou môžeme vyriešiť problém, že náš front-end už nemusí rozlišovať podľa vzťahu medzi podriadenými a podriadenými. Po štvrté: Vyššie uvedené je len stručný úvod do hlavných metód zaťaženia a reorganizácie v Tree. Nižšie zverejníme kompletný kód JS pluginu s podrobnými komentármi v kóde Funkcie pluginov: check, single, expand, fold, display/hide node connection, podpora vkladania uzlov, mazania uzlov, prispôsobenie ikon uzlov, nastavenie výberu uzlov, získavanie uzlov na výber adresárov (podpora XML, JSON a pod.) Menu pravým tlačidlom (momentálne nie je podporované, pretože je potrebné použiť vyskakovacie okno, táto funkcia je zablokovaná a odstránená) Podpora klikania na uzly, dvojkliky, zmeny zmien výberu uzla a podobne Konečný efekt zobrazenia Príloha na stiahnutie:
Tree_Demo.rar
(54.71 KB, Počet stiahnutí: 1)
| 
Zverejnené 11. 7. 2019 11:20:12
|
|
|
|
