To objavo je nazadnje uredil szxiaxiaojun 11. 7. 2019 ob 11:20
Pri vsakodnevnem razvoju spletnih projektov pogosto naletimo na prikaz podatkov o strukturi drevesa, ki jih pridobimo iz baze podatkov in prikažemo v obliki drevesa. Za lažje razumevanje lahko napišemo večbrskalniško drevesno krmiljenje za JavaScript, ki ga je mogoče v prihodnosti ponovno uporabiti. Ta razdelek deli lastno razvit vtičnik JS tree, ki ga je mogoče prenesti in neposredno uporabiti za prijatelje v stiski. Vtičnik za drevo je treba implementirati (1) Samodejno organizirati podatke v podrejene odnose, tako da nam ni treba organizirati odnosov med nadrejenimi in podrejenimi z ročnim dodajanjem podatkov ali pridoščanjem podatkov iz baze podatkov na sprednji strani (2) Podpora prilagojenemu drevesu nalaganja imenikov za nalaganje podatkov v XML in JSON formatih (3) Uresničiti funkcijo izbire drevesnih vozlišč (enojna izbira, večkratna izbira [kaskadna izbira]). (4) Podpora enkratnemu nalaganju velikih podatkov 。。。。。。 Začnimo deliti vtičnik Tree, ki sem ga napisal: Ta vtičnik temelji na Jquery in potrebuje reference
Prvič: Parameter JSON objekt vsakega drevesnega vozlišča v vtičniku je prikazan spodaj nodeItem: funkcija () {
return {
nodecode: "", // nodecode
Nodetext: "", // Node text [Node display text]
nodetitle: "", // naslov vozlišča [besedilo vozlišča za zastareli prikaz gibanja miške]
supnodecode: "", // Koda nadrejenega vozlišča [določite kodo nadrejenega vozlišča, kateremu to vozlišče pripada, in oblikujte podrejeno povezavo preko te kode]
nodeurl: "", // URL vozlišča predstavlja naslov povezave, ki ga prilagodi trenutno vozlišče
ikon razširi: "", // Ikona razširitve vozlišča [Ikona, prikazana v vozlišču drevesa imenikov v prilagojeni razširjeni fazi, če je prazna, se uporabi privzeta ikona]
iconcollapse: "" // Ikona za zmanjšanje vozlišča [Ikona, prikazana v vozlišču drevesa imenikov v prilagojenem stanju skrčenja, če je prazna, se uporablja privzeta ikona]
}
} Drugič: Trije načini za nalaganje drevesa imenikov 1. loadJson(Json) polje vozlišč drevesa imenikov objektov JSON (dokončano enkrat) JSON format je niz argumentov za vsak element objekta nodeItem
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) XML format podatkov vozlišča (enkratno dokončanje)
Opomba: Uporabite XML format nizov Upoštevajte, da oznaka vozliščaIme:nodecode, nodetext itd. ni dovoljena za spremembo, saj je program neposredno pridobljen z uporabo tega imena
<root>
<item> // Vsako vozlišče vsebuje več podatkovnih vrednosti
<nodecode><![CDATA[vrednost kodiranja vozlišča]]></nodecode>
<nodetext><![CDATA[ime vozlišča text]]]></nodetext>
<nodetitle><![CDATA[node mouse move in display prompt text]]></nodetitle>
<supnodecode><![CDATA[Kodiranje starša vozlišč]]></supnodecode>
<nodeurl><![CDATA[Naslov povezave, povezan z vozliščem]]></nodeurl>
<iconexpand><![CDATA[Pokaži pot ikone, ko se vozlišče razširi]]></iconexpand>
<iconcollapse><![CDATA[Pokaži pot ikone, ko se vozlišče skrči]]></iconcollapse>
</item> ... ...
</root>
3. Ročno dodajanje elementov vozlišč enega za drugim (dva koraka za dokončanje) z metodo addNodeItem(nodeItem) in metodo vtičnikov
Drevo lahko ustvarite tako, da to metodo ročno pokličete preko vtičnika objekta makeTree().
Tretjič: Metoda dogodkov za reorganizacijo odnosa med podrejenimi in podrejenimi znotraj drevesa imenikov S to metodo lahko rešimo problem, da naš front-end ne potrebuje več razlikovati glede na odnos med podrejenimi in podrejenimi. Četrtič: Zgornje je le kratek uvod v glavne metode obremenjevanja in reorganizacije v Tree. Spodaj bomo objavili celotno kodo JS vtičnika s podrobnimi komentarji v kodi Funkcije vtičnikov: preverjanje, enojno, razširitev, prepogibanje, prikaz/skrivanje povezave vozlišč, podpora za vstavljanje vozlišč, brisanje vozlišč, prilagajanje ikon vozlišč, nastavitev izbire vozlišč, pridobivanje vozlišč za izbiro drevesa imenikov (podpora XML, JSON itd.) Meni z desnim klikom (trenutno ni podprt, ker je treba uporabiti plast pojavnega okna, ta funkcija je blokirana in odstranjena) Podpira klik vozlišč, dvojni klik, dogodke spremembe izbire vozlišč itd Končni učinek prikaza Prenos priloge:
Tree_Demo.rar
(54.71 KB, Število prenosov: 1)
| 
Objavljeno na 11. 07. 2019 11:20:12
|
|
|
|
