Šo ziņu pēdējo reizi rediģēja szxiaxiaojun 2019-7-11 11:20
Ikdienas tīmekļa projektu izstrādē mēs bieži sastopamies ar koku struktūras datu attēlošanu, kas tiek iegūti no datu bāzes un parādīti koka formā. Ērtības labad mēs varam uzrakstīt JavaScript vairāku pārlūkprogrammu koka vadīklu, ko nākotnē var izmantot atkārtoti. Šajā sadaļā ir kopīgs pašizstrādāts JS koka spraudnis, kuru var lejupielādēt un izmantot tieši draugiem, kuriem tas nepieciešams. Koka spraudnis ir jāievieš (1) Automātiski organizējiet datus pakārtotajās attiecībās, lai mums nebūtu jāorganizē attiecības starp priekšniekiem un padotajiem, manuāli pievienojot datus vai iegūstot datus no datu bāzes priekšgalā (2) Atbalstiet pielāgotu ielādes direktoriju koku Atbalstiet datu ielādi XML un JSON formātos (3) Realizējiet koka mezglu atlases funkciju (viena atlase, vairākkārtēja atlase [kaskādes atlase]). (4) Atbalstīt vienreizēju lielo datu ielādi 。。。。。。 Sāksim dalīties ar koka spraudni, ko es rakstīju: Šis spraudnis ir balstīts uz Jquery, un tam ir nepieciešamas atsauces
Pirmkārt: katra spraudņa koka mezgla parametrs JSON objekts ir parādīts zemāk nodeItem: funkcija () {
atgriezties {
nodecode: "", // nodecode
nodetext: "", // mezgla teksts [mezgla displeja teksts]
nodetitle: "", // node title [mezgla teksts peles kustības novecojušam displejam]
supnodecode: "", // Augstākā mezgla kods [definējiet vecāka mezgla kodu, kuram pieder šis mezgls, un veidojiet pakārtotas attiecības, izmantojot šo kodu]
nodeurl: "", // node URL apzīmē saites URL adresi, ko pielāgo pašreizējais mezgls
iconexpand: "", // Mezgla izvēršanas ikona [Ikona, kas tiek parādīta direktoriju koka mezglā pielāgotā izvērstā stāvoklī, ja tukša, tiek izmantota noklusējuma ikona]
iconcollapse: "" // Mezgla saraušanās ikona [Ikona, kas tiek parādīta direktoriju koka mezglā pielāgotā saraušanās stāvoklī, ja tukša, tiek izmantota noklusējuma ikona]
}
} Otrkārt: trīs veidi, kā ielādēt direktoriju koku 1. loadJson(Json) JSON objektu direktoriju koka mezglu masīvs (pabeigts vienā reizē) JSON formāts ir argumentu masīvs katram nodeItem objekta vienumam
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) XML virknes formāta mezgla dati (vienreizēja pabeigšana)
Piezīme: Izmantojiet XML virknes formātu Ņemiet vērā, ka node tagName:nodecode nodetext utt. nav atļauts mainīt, jo programma tiek iegūta tieši, izmantojot šo nosaukumu
<root>
<item> // Katrs mezgls satur vairākas datu vērtības
<nodecode><![CDATA[mezgla kodējuma vērtība]]></nodecode>
<nodetext><![CDATA[mezgla nosaukuma teksts]]]></nodetext>
<nodetitle><![CDATA[mezgla peles pārvietošana displeja uzvednes tekstā]]></nodetitle>
<supnodecode><![CDATA[Mezgla vecākkodējums]]></supnodecode>
<nodeurl><![CDATA[Mezgla saistītās saites adrese]]></nodeurl>
<iconexpand><![CDATA[Rādīt ikonas ceļu, kad mezgls ir izvērsts]]></iconexpand>
<iconcollapse><![CDATA[Rādīt ikonas ceļu, kad mezgls saraujas]]></iconcollapse>
</item> ... ...
</root>
3. Pievienojiet mezglu vienumus manuāli pa vienam (divas darbības), izmantojot metodi addNodeItem (nodeItem), izmantojot spraudņa objektu metodi
Jūs varat izveidot koku, izsaucot šo metodi manuāli, izmantojot spraudņa objektu makeTree().
Treškārt: notikuma metode attiecību reorganizēšanai starp padotajiem un padotajiem direktoriju kokā Izmantojot šo metodi, mēs varam atrisināt problēmu, ka mūsu priekšgalam vairs nav jānošķir pēc attiecībām starp padotajiem un padotajiem. Ceturtkārt: Iepriekš minētais ir tikai īss ievads par galvenajām Tree ielādes un reorganizācijas metodēm. Zemāk mēs ievietosim pilnu JS spraudņa kodu ar detalizētiem komentāriem kodā Spraudņa funkcijas: pārbaudīt, viens, paplašināt, salocīt, rādīt/paslēpt mezglu savienojumu, atbalstīt mezglu ievietošanu, mezglu dzēšanu, mezglu ikonu pielāgošanu, mezglu izvēles iestatīšanu, direktoriju koka atlases mezglu iegūšanu (atbalsts XML, JSON utt.) Ar peles labo pogu noklikšķiniet uz izvēlnes (pagaidām netiek atbalstīts, jo jāizmanto uznirstošs slānis, šī funkcija ir bloķēta un noņemta) Atbalsta mezglu noklikšķināšanu, dubultklikšķi, mezglu atlases maiņas notikumus utt Galīgais displeja efekts Pielikumu lejupielāde:
Tree_Demo.rar
(54.71 KB, Lejupielādes skaits: 1)
| 
Publicēts 11.07.2019 11:20:12
|
|
|
|
