Šį pranešimą paskutinį kartą redagavo szxiaxiaojun 2019-7-11 11:20
Kurdami kasdienius interneto projektus dažnai susiduriame su medžio struktūros duomenų rodymu, kurie gaunami iš duomenų bazės ir rodomi medžio formos. Patogumui galime parašyti "JavaScript" kelių naršyklių medžio valdiklį, kurį ateityje bus galima pakartotinai naudoti. Šiame skyriuje dalijamasi pačių sukurtu JS medžio papildiniu, kurį galima atsisiųsti ir naudoti tiesiogiai draugams, kuriems to reikia. Reikia įdiegti medžio papildinį (1) Automatiškai suskirstykite duomenis į pavaldinius ryšius, kad mums nereikėtų organizuoti santykių tarp viršininkų ir pavaldinių rankiniu būdu pridedant duomenis arba gaunant duomenis iš duomenų bazės priekinėje dalyje (2) Palaikykite pasirinktinį katalogų medžio įkėlimą Palaikykite duomenų įkėlimą XML ir JSON formatais (3) Realizuokite medžio mazgų pasirinkimo funkciją (vienas pasirinkimas, daugkartinis pasirinkimas [kaskadinis pasirinkimas]). (4) Palaikykite vienkartinį didelių duomenų įkėlimą 。。。。。。 Pradėkime dalintis medžio įskiepiu Aš parašiau: Šis įskiepiai yra pagrįstas Jquery ir reikia nuorodų
Pirmas: Žemiau parodytas kiekvieno įskiepio medžio mazgo parametras JSON objektas nodeItem: funkcija () {
grąžinti {
nodecode: "", // nodecode
nodetext: "", // mazgo tekstas [mazgo rodymo tekstas]
nodetitle: "", // node title [pelės judėjimo pasenusio ekrano mazgo tekstas]
supnodecode: "", // Aukštesnio mazgo kodas [apibrėžkite pirminio mazgo kodą, kuriam priklauso šis mazgas, ir per šį kodą suformuokite antrinį ryšį]
nodeurl: "", // mazgo URL nurodo nuorodos URL adresą, tinkintą dabartinio mazgo
iconexpand: "", // Mazgo išplėtimo piktograma [Piktograma rodoma katalogų medžio mazge pritaikytoje išplėstinėje būsenoje, jei tuščia, naudojama numatytoji piktograma]
iconcollapse: "" // Mazgo susitraukimo piktograma [Piktograma rodoma katalogų medžio mazge pasirinktinėje susitraukimo būsenoje, jei tuščia, naudojama numatytoji piktograma]
}
} Antra: Trys katalogų medžio įkėlimo būdai 1. loadJson(Json) JSON objektų katalogų medžio mazgų masyvas (užbaigtas vienu metu) JSON formatas yra kiekvieno nodeItem objekto elemento argumentų masyvas
[ { nodecode: "", nodetext: "", nodetitle: """,supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) XML eilutės formato mazgo duomenys (vienkartinis užbaigimas)
Pastaba: Naudoti XML eilutės formatą Atkreipkite dėmesį, kad mazgo tagName:nodecode nodetext ir kt. negalima keisti, nes programa gaunama tiesiogiai naudojant šį pavadinimą
<root>
<item> // Kiekviename mazge yra kelios duomenų reikšmės
<nodecode><![CDATA[mazgo kodavimo reikšmė]]></nodecode>
<nodetext><![CDATA[mazgo pavadinimo tekstas]]]></nodetext>
<nodetitle><![CDATA[mazgo pelės perkėlimas rodymo raginimo tekste]]></nodetitle>
<supnodecode><![CDATA[Mazgo pirminis kodavimas]]></supnodecode>
<nodeurl><![CDATA[Mazgo susieto saito adresas]]></nodeurl>
<iconexpand><![CDATA[Rodyti piktogramos kelią, kai mazgas išplėstas]]></iconexpand>
<iconcollapse><![CDATA[Rodyti piktogramos kelią, kai mazgas susitraukia]]></iconcollapse>
</item> ... ...
</root>
3. Pridėkite mazgo elementus rankiniu būdu po vieną (du veiksmus užbaigti) naudodami addNodeItem(nodeItem) metodą papildinių objektų metodu
Galite sukurti medį iškviesdami šį metodą rankiniu būdu per įskiepio objektą makeTree().
Trečia: įvykio metodas, skirtas reorganizuoti santykius tarp pavaldinių ir pavaldinių katalogų medyje Taikydami šį metodą galime išspręsti problemą, kad mūsų priekinės dalies nebereikia atskirti pagal ryšį tarp pavaldinių ir pavaldinių. Ketvirta: Aukščiau pateikta informacija yra tik trumpas įvadas į pagrindinius "Tree" įkėlimo ir reorganizavimo metodus. Žemiau paskelbsime visą JS įskiepio kodą su išsamiais kodo komentarais Įskiepio funkcijos: tikrinti, atskirti, išplėsti, sulankstyti, rodyti/slėpti mazgų ryšį, palaikyti mazgų įterpimą, mazgų ištrynimą, mazgų piktogramų pritaikymą, mazgų pasirinkimo nustatymą, katalogų medžio pasirinkimo mazgų gavimą (palaikyti XML, JSON ir kt.) Dešiniuoju pelės mygtuku spustelėkite meniu (kol kas nepalaikomas, nes reikia naudoti iššokantį sluoksnį, ši funkcija užblokuojama ir pašalinama) Palaikykite mazgo spustelėjimą, dukart spustelėjimą, mazgo pasirinkimo keitimo įvykius ir kt Galutinis ekrano efektas Priedo atsisiuntimas:
Tree_Demo.rar
(54.71 KB, Atsisiuntimų skaičius: 1)
| 
Paskelbta 2019-07-11 11:20:12
|
|
|
|
