Dit bericht is voor het laatst bewerkt door szxiaxiaojun op 11-7-2019 11:20
Bij dagelijkse ontwikkeling van webprojecten komen we vaak de weergave van boomstructuurgegevens tegen, die uit de database worden gehaald en in een boomvorm worden weergegeven. Voor het gemak kunnen we een browsercross-browser boomcontrole voor JavaScript schrijven die in de toekomst hergebruikt kan worden. Deze sectie deelt een zelfontwikkelde JS tree-plugin, die direct gedownload en gebruikt kan worden door vrienden in nood. De boom-plugin moet worden geïmplementeerd (1) Automatisch data organiseren in ondergeschikte relaties, zodat we de relatie tussen superieuren en ondergeschikten niet hoeven te organiseren door handmatig data toe te voegen of data uit de database aan de front-end te halen. (2) Ondersteuning voor aangepaste laaddirectoryboom; Ondersteuning voor dataladen in XML- en JSON-formaten. (3) Realiser de functie van het selecteren van boomknopen (enkele selectie, meervoudige selectie [cascadeselectie]). (4) Ondersteuning van eenmalig laden van big data 。。。。。。 Laten we beginnen met het delen van een Tree-plugin die ik heb geschreven: Deze plugin is gebaseerd op Jquery en heeft referenties nodig
Ten eerste: Het parameter JSON-object van elke boomknoop in de plugin wordt hieronder getoond nodeItem: functie () {
return {
nodecode: "", // nodecode
nodetext: "", // nodetekst [node display text]
nodetitel: "", // knooppunttitel [knooppunttekst voor muisbeweging verouderd display]
supnodecode: "", // Superieure knoopcode [definieer de ouderknoopcode waartoe deze knoop behoort, en vorm een ondergeschikte relatie via deze code]
nodeurl: "", // knooppunt-URL vertegenwoordigt het link-URL-adres dat door de huidige knoop is aangepast
iconexpand: "", // Node Expand Icon [Pictogram weergegeven in de directoryboomknoop in de aangepaste uitgebreide toestand, als leeg wordt het standaardpictogram gebruikt]
iconcollapse: "" // Node Shrink Icon [Pictogram weergegeven in de directoryboomknoop in een aangepaste krimpstatus, als leeg wordt het standaardpictogram gebruikt]
}
} Ten tweede: Drie manieren om de directoryboom te laden 1. loadJson(Json) JSON object directory tree node-array (voltooid op één moment) Het JSON-formaat is een array van argumenten voor elk item van een nodeItem-object
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) XML-stringformaat knooppuntgegevens (eenmalige voltooiing)
Opmerking: Gebruik XML-stringformaat. Let op dat knooppunttagNaam:nodecode, nodetext, enz. niet gewijzigd mogen worden, omdat het programma direct wordt verkregen door deze naam te gebruiken.
<root>
<item> // Elke node bevat meerdere datawaarden
<nodecode><![CDATA[node encoding value]]></nodecode>
<nodetext><![CDATA[knoopnaam tekst]]]></nodetext>
<nodetitle><![CDATA[knoop muisbeweging in displayprompttekst]]></nodetitle>
<supnodecode><![CDATA[Knoopoudercodering]]></supnodecode>
<nodeurl><![CDATA[Node Associated Link Address]]></nodeurl>
<iconexpand><![CDATA[Toon icoonpad wanneer knoop is uitgebreid]]></iconexpand>
<iconcollapse><![CDATA[Toon icoonpad wanneer knoop krimpt]]></iconcollapse>
</item> ... ...
</root>
3. Voeg node-items handmatig één voor één toe (twee stappen om te voltooien) via de methode addNodeItem(nodeItem) via de methode van plug-in objecten
Je kunt een boom aanmaken door deze methode handmatig aan te roepen via het plugin-object makeTree().
Ten derde: Gebeurtenismethode voor het herorganiseren van de relatie tussen ondergeschikten en ondergeschikten binnen de directoryboom Met deze methode kunnen we het probleem oplossen dat onze front-end niet langer hoeft te onderscheiden op basis van de relatie tussen ondergeschikten en ondergeschikten. Ten vierde: Bovenstaande is slechts een korte introductie tot de belangrijkste laad- en reorganisatiemethoden van Tree. Hieronder plaatsen we de volledige JS-plugincode met gedetailleerde opmerkingen in de code Plug-in functies: controleren, single, expanderen, vouwen, node verbinding tonen/verbergen, ondersteuning voor het invoegen van nodes, het verwijderen van nodes, het aanpassen van node-iconen, het instellen van nodeselectie, het verkrijgen van directoryboomselectie-nodes (ondersteuning voor XML, JSON, enz.) Rechtsklikmenu (voorlopig niet ondersteund, omdat de pop-uplaag gebruikt moet worden, deze functie wordt geblokkeerd en verwijderd) Ondersteuning voor knopklikken, dubbelklikken, knooppuntselectie wijzigen gebeurtenissen, enzovoort Het laatste weergave-effect Bijlage downloaden:
Tree_Demo.rar
(54.71 KB, Aantal downloads: 1)
| 
Geplaatst op 11-07-2019 11:20:12
|
|
|
|
