Seda postitust toimetas viimati szxiaxiaojun 2019-7-11 kell 11:20
Igapäevases veebiprojektide arenduses kohtame sageli puustruktuuri andmete kuvamist, mis saadakse andmebaasist ja kuvatakse puu kujul. Mugavuse huvides saame kirjutada JavaScripti jaoks brauseritevahelise puu juhtimise, mida saab tulevikus uuesti kasutada. See osa jagab ise arendatud JS puu pluginat, mida saab alla laadida ja kasutada otse abivajavatele sõpradele. Puu plugin tuleb rakendada (1) Organiseerida andmed automaatselt alluvsuhetesse, nii et meil ei oleks vaja korraldada ülemuste ja alluvate vahelist suhet käsitsi andmete lisamise või esipaneeli andmebaasist andmete hankimisega (2) Toeta kohandatud laadimiskataloogipuud Toeta andmete laadimist XML ja JSON formaatides (3) Täida puusõlmede valimise funktsioon (üksikvalik, mitmikvalik [kaskaadivalik]). (4) Suurandmete ühekordse laadimise toetamine 。。。。。。 Alustame Tree plugina jagamist, mille ma kirjutasin: See plugin põhineb Jqueryl ja vajab viiteid
Esiteks: Iga puusõlme parameeter JSON on näidatud allpool nodeItem: funktsioon () {
return {
sõlmekood: "", // sõlmekood
sõlmetekst: "", // sõlme tekst [sõlme kuvatekst]
nodetitle: "", // sõlme pealkiri [sõlme tekst hiire liikumise jaoks aegunud kuvamine]
supnodecode: "", // Superior node code [määra vanem-sõlmekood, kuhu see sõlm kuulub, ja moodusta selle koodi kaudu alluv seos]
nodeurl: "", // sõlme URL esindab lingi URL-aadressi, mida praegune sõlm kohandab
iconexpand: "", // Sõlme laiendamise ikoon [Ikoon, mis kuvatakse kataloogipuu sõlmes kohandatud laiendatud olekus, kui see on tühi, kasutatakse vaikimisi ikooni]
iconcollapse: "" // Node Shrink Icon [Ikoon, mis kuvatakse kataloogipuu sõlmes kohandatud kahanemisolekus, kui see on tühi, kasutatakse vaikimisi ikooni]
}
} Teiseks: Kolm viisi kataloogipuu laadimiseks 1. loadJson(Json) JSON objektikataloogipuu sõlmede massiivi (lõpetatud korraga) JSON-formaat on argumentide massiivi iga nodeItme-objekti elemendi kohta
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) XML stringi formaadi sõlme andmed (ühekordne lõpetamine)
Märkus: Kasuta XML-stringiformaati Pane tähele, et sõlme silt Name:nodecode nodetext jne ei ole lubatud muuta, sest programm saadakse otse selle nime kaudu
<root>
<item> // Iga sõlm sisaldab mitut andmeväärtust
<nodecode><![CDATA[sõlme kodeerimise väärtus]]></nodecode>
<nodetext><![CDATA[node name text]]]></nodetext>
<nodetitle><![CDATA[sõlme hiire liigutus ekraani tekstis]]></nodetitle>
<supnodecode><![CDATA[Node parent encoding]]></supnodecode>
<nodeurl><![CDATA[Sõlme seotud lingiaadress]]></nodeurl>
<iconexpand><![CDATA[Näita ikooniteed sõlme laiendamisel]]></iconexpand>
<iconcollapse><![CDATA[Näita ikooniteed, kui sõlm kahaneb]]></iconcollapse>
</item> ... ...
</root>
3. Lisa sõlme elemente käsitsi ükshaaval (kaks sammu lõpetamiseks) meetodi addNodeItem(nodeItem) abil, kasutades plugin-objektide meetodit
Puu saab luua, kutsudes seda meetodit käsitsi plugina objekti makeTree() kaudu.
Kolmandaks: Sündmuse meetod alluvate ja alluvate suhte ümberkorraldamiseks kataloogipuus Selle meetodi abil saame lahendada probleemi, mida meie kasutajaliides enam ei ole vaja eristada vastavalt alluvate ja alluvate vahelisele suhtele. Neljandaks: Ülaltoodud on vaid lühike sissejuhatus Tree peamistesse laadimis- ja ümberkorraldamismeetoditesse. Allpool postitame täieliku JS plugina koodi koos üksikasjalike kommentaaridega koodis Pistikprogrammi funktsioonid: kontrolli, üksik, laienda, volti, sõlmede ühenduse näitamine/peitmine, sõlmede lisamise tugi, sõlmede kustutamine, sõlmeikoonide kohandamine, sõlmede valiku määramine, kataloogipuu valiku sõlmede hankimine (tugi XML, JSON jne) Paremklõpsuga menüü (praegu ei toetata, kuna hüpikakihti tuleb kasutada, see funktsioon on blokeeritud ja eemaldatud) Toeta sõlme klõpsimist, topeltklõpsu, sõlmede valiku muutmise sündmusi jne Lõplik ekraani efekt Manuse allalaadimine:
Tree_Demo.rar
(54.71 KB, Allalaadimiste arv: 1)
| 
Postitatud 11.07.2019 11:20:12
|
|
|
|
