Ezt a bejegyzést utoljára szxiaxiaojun szerkesztette: 2019-7-11 11:20
A napi webprojektfejlesztés során gyakran találkozunk a fa szerkezeti adatok megjelenítésével, amelyeket az adatbázisból szereznek és fa formában jelenítenek meg. A kényelem érdekében írhatunk böngészős fa vezérlőt JavaScripthez, amelyet a jövőben újra fel lehet használni. Ez a rész egy saját fejlesztésű JS fa plugint oszt meg, amelyet közvetlenül letölthetsz és használhatsz rászoruló barátoknak. Tree plugint kell megvalósítani (1) Automatikusan rendszerezzük az adatokat alárendelt kapcsolatokba, így nem kell a felettesek és beosztottak közötti kapcsolatot kézi adathozzáadással vagy az adatbázisból az előtérben történő adatok beszerzésével szervezni (2) Támogatja az egyedi könyvtárfát betöltés XML és JSON formátumú adatbetöltések támogatása (3) A fa csomópontok kiválasztásának funkciójának megvalósítása (egy kiválasztás, többszörös választás [kaszkád kiválasztás]). (4) Támogatni a big data egyszeri betöltését 。。。。。。 Kezdjük el osszani egy Tree plugint, amit írtam: Ez a plugin Jquery-n alapul, és hivatkozásokra van szüksége
Először: Az egyes facsomópontok JSON objektuma az alábbiakban látható nodeItem: függvény () {
return {
Nodecode: "", // Nodecode
Nodetext: "", // csomópont szöveg [csomópont megjelenítési szöveg]
Nodetitle: "", // Node title [egérmozgáshoz szükséges csomópont szöveg elavult megjelenítés]
supnodecode: "", // Felső csomópont kód [definiálja azt a szülőcsomópont kódot, amelyhez ez a csomópont tartozik, és képezzen alárendelt kapcsolatot ezen a kódon keresztül]
nodeurl: "", // node URL a jelenlegi csomópont által testreszabott link URL címet képviseli
iconexpand: "", // Node Expand Icon [Ikon az arc könyvtárfa csomópontjában megjelenítve testreszabott kibővített állapotban, ha üres, az alapértelmezett ikont használják]
iconcollapse: "" // Node Shrink Icon [Az ikon a könyvtárfa csomópontjában egyedi zsugorítási állapotban jelenik meg, ha üres, az alapértelmezett ikon használatos]
}
} Második: Három módja a könyvtárfa betöltésének 1. loadJson(Json) JSON objektumkönyvtárfa csomópont tömbje (egyszerre befejezve) A JSON formátum egy argumentumtömbje egy nodeItem objektum minden elemére
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) XML string formátumú csomópont adatok (egyszeri befejezés)
Megjegyzés: XML string formátum használata. Megjegyzés: a node tagName:nodecode nodetext stb. nem lehet megváltoztatni, mert a program közvetlenül ezen néven érhető el
<root>
<item> // Minden csomópont több adatértéket tartalmaz
<nodecode><![CDATA[node encoding value]]></nodecode>
<nodetext><![CDATA[node name text]]]></nodetext>
<nodetitle><![CDATA[csomópont egér mozgása a megjelenítési prompt szövegben]]></nodetitle>
<supnodecode><![CDATA[Node parent encoding]]></supnodecode>
<nodeurl><![CDATA[Node Associated Link Address]]></nodeurl>
<iconexpand><![CDATA[Simge út megjelenítése node kibővítésekor]]></iconexpand>
<iconcollapse><![CDATA[Ikon útjának megjelenítése, amikor node zsugorodik]]></iconcollapse>
</item> ... ...
</root>
3. Csatolj kézzel a csomópont elemeket egyenként (két lépés a befejezéshez) az addNodeItem(nodeItem) módszerrel a plug-in objektumok módszerén keresztül
Létrehozhatsz egy fát úgy, hogy ezt a módszert manuálisan hívod a makeTree() plugin objektumon keresztül.
Harmadszor: Eseménymódszer az alárendeltek és alárendeltek közötti kapcsolat átszervezésére a könyvtárfán belül. Ezzel a módszerrel megoldhatjuk azt a problémát, amelyet a frontendünknek már nem kell megkülönböztetnie az alárendeltek és alárendeltjeink közötti viszony alapján. Negyedszer: A fentiek csak rövid bevezetés a Tree fő betöltési és átszervezési módszereibe. Az alábbiakban a teljes JS plugin kódot és részletes megjegyzéseket tesszük közzé a kódban Plug-in funkciók: ellenőrzés, egy, bővítés, hajtás, csomópont kapcsolat megjelenítése/rejtése, csomópontok behelyezésének támogatása, csomópontok törlése, csomópont ikonok testreszabása, csomópontválasztás beállítása, könyvtárfa kiválasztó csomópontok megszerzése (XML, JSON stb. támogatása) Jobb kattintás menü (egyelőre nem támogatott, mert a felugró réteget kell használni, ez a funkció blokkolva és eltávolításra kerül) Támogatja a csomópont kattintását, dupla kattintást, csomópontválasztási változtatási eseményeket stb A végső megjelenítési hatás Csatolék letöltése:
Tree_Demo.rar
(54.71 KB, Letöltések száma: 1)
| 
Közzétéve 2019. 07. 11. 11:20:12
|
|
|
|
