Tento příspěvek byl naposledy upraven szxiaxiaojun dne 11. 7. 2019 v 11:20
Při každodenním vývoji webových projektů se často setkáváme s zobrazením dat o struktuře stromu, která jsou získána z databáze a zobrazena ve tvaru stromu. Pro pohodlí můžeme napsat stromový systém pro JavaScript napříč prohlížeči, který lze v budoucnu znovu použít. Tato sekce sdílí vlastní plugin JS stromu, který lze stáhnout a použít přímo pro přátele v nouzi. Je třeba implementovat plugin stromu (1) Automaticky organizovat data do podřízených vztahů, abychom nemuseli organizovat vztahy mezi nadřízenými a podřízenými ručním přidáváním dat nebo získáváním dat z databáze na front-endu (2) Podpora vlastního stromu načítání adresářů a načítání dat ve formátech XML a JSON (3) Realizovat funkci výběru stromových uzlů (jeden výběr, vícenásobný výběr [kaskádový výběr]). (4) Podpora jednorázového načítání velkých dat 。。。。。。 Začněme sdílet plugin Tree, který jsem napsal: Tento plugin je založen na Jquery a potřebuje reference
Za prvé: Parametr JSON objekt každého stromového uzlu v pluginu je zobrazen níže nodeItem: function () {
return {
nodecode: "", // nodecode
Nodetext: "", // text uzlu [text uzlu zobrazení]
nodetitle: "", // node title [text uzlu pro zastaralý displej pohybu myši]
supnodecode: "", // Kód nadřízeného uzlu [definujte kód nadřazeného uzlu, ke kterému tento uzel patří, a vytvořte podřízený vztah prostřednictvím tohoto kódu]
nodeurl: "", // URL uzlu představuje URL linku upravenou aktuálním uzlem
ikonexpand: "", // Ikona rozbalit uzel [Ikona zobrazená v adresářovém stromu v upraveném rozšířeném stavu, pokud je prázdná, používá se výchozí ikona]
iconcollapse: "" // Ikona zmenšení uzlu [Ikona zobrazená v adresářovém stromu v vlastním zmenšovacím stavu, pokud je prázdná, používá se výchozí ikona]
}
} Za druhé: Tři způsoby, jak načíst adresářový strom 1. loadJson(Json) pole uzlů adresářového stromu objektů JSON (dokončeno jednou) JSON formát je pole argumentů pro každý prvek objektu nodeItem
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) XML formát string formát dat uzlů (jednorázové dokončení)
Poznámka: Použijte formát XML řetězců Všimněte si, že tag nodeName:nodecode nodetext atd. nelze měnit, protože program je přímo získán tímto názvem
<root>
<item> // Každý uzel obsahuje více datových hodnot
<nodecode><![CDATA[hodnota kódování uzlu]]></nodecode>
<nodetext><![CDATA[node name text]]]></nodetext>
<nodetitle><![CDATA[node mouse move in display prompt text]]></nodetitle>
<supnodecode><![CDATA[Node parent encoding]]></supnodecode>
<nodeurl><![CDATA[adresa propojení spojeného s uzlem]]></nodeurl>
<iconexpand><![CDATA[Zobrazit cestu ikony při rozbalení uzlu]]></iconexpand>
<iconcollapse><![CDATA[Zobrazit cestu ikony při zmenšení uzlu]]></iconcollapse>
</item> ... ...
</root>
3. Přidávat položky uzlů ručně jednu po druhé (dva kroky k dokončení) metodou addNodeItem(nodeItem) pomocí plug-in objektů
Strom můžete vytvořit tak, že tuto metodu zavoláte ručně přes plugin object makeTree().
Za třetí: Metoda událostí pro reorganizaci vztahu mezi podřízenými a podřízenými v adresářovém stromu Touto metodou můžeme vyřešit problém, že náš front-end již nemusí rozlišovat podle vztahu mezi podřízenými a podřízenými. Za čtvrté: Výše uvedené je jen stručný úvod do hlavních metod zatížení a reorganizace ve Tree. Níže zveřejníme kompletní kód JS pluginu s podrobnými komentáři v kódu Funkce plug-inov: kontrola, jednorázení, rozbalování, skládání, zobrazení/skrýt připojení uzlů, podpora vkládání uzlů, mazání uzlů, přizpůsobení ikon uzlů, nastavení výběru uzlů, získávání uzlů pro výběr adresářového stromu (podpora XML, JSON atd.) Menu pravým tlačítkem (zatím není podporováno, protože je nutné použít vyskakovací vrstvu, tato funkce je blokována a odstraněna) Podpora klikání na uzly, dvojklikání, změny výběru uzlu atd Konečný efekt zobrazení Stažení přílohy:
Tree_Demo.rar
(54.71 KB, Počet stažení: 1)
| 
Zveřejněno 11.07.2019 11:20:12
|
|
|
|
