Dieser Beitrag wurde zuletzt von szxiaxiaojun am 11.07.2019 um 11:20 Uhr bearbeitet
Bei der täglichen Webprojektentwicklung stoßen wir oft auf die Darstellung von Baumstrukturdaten, die aus der Datenbank stammen und in Baumform dargestellt werden. Zur Bequemlichkeit können wir eine browserübergreifende Baumsteuerung für JavaScript schreiben, die in Zukunft wiederverwendet werden kann. Dieser Abschnitt teilt ein selbstentwickeltes JS-Tree-Plugin, das direkt für bedürftige Freunde heruntergeladen und genutzt werden kann. Das Baum-Plugin muss implementiert werden (1) Automatisch Daten in untergeordnete Beziehungen organisieren, sodass wir die Beziehung zwischen Vorgesetzten und Untergebenen nicht organisieren müssen, indem wir manuell Daten hinzufügen oder Daten aus der Datenbank am Frontend beziehen (2) Unterstützung benutzerdefinierter Ladeverzeichnisbaum Unterstützung Datenladen in XML- und JSON-Formaten (3) Die Funktion der Auswahl von Baumknoten (Einzelauswahl, Mehrfachauswahl [Kaskadenauswahl]) realisieren). (4) Unterstützung des einmaligen Ladens von Big Data 。。。。。。 Lasst uns anfangen, ein Tree-Plugin zu teilen, das ich geschrieben habe: Dieses Plugin basiert auf Jquery und benötigt Referenzen
Erstens: Das Parameter-JSON-Objekt jedes Baumknotens im Plugin ist unten dargestellt nodeItem: function () {
Rückkehr {
Knotencode: "", // Knotencode
nodetext: "", // Knotentext [Knotenanzeigetext]
Knotentitel: "", // Knotentitel [Knotentext für Mausbewegung veraltet Display]
supnodecode: "", // Superior Node-Code [definiere den übergeordneten Knotencode, zu dem dieser Knoten gehört, und bilde eine untergeordnete Beziehung über diesen Code]
nodeurl: "", // Knoten-URL stellt die Link-URL-Adresse dar, die vom aktuellen Knoten angepasst wird
iconexpand: "", // Node Expand Icon [Icon wird im Verzeichnisbaum-Knoten im benutzerdefinierten erweiterten Zustand angezeigt, wenn leer, wird das Standardsymbol verwendet]
iconcollapse: "" // Node Shrink Icon [Icon wird im Verzeichnisbaum-Knoten im benutzerdefinierten Verkleinerungszustand angezeigt, wenn leer, wird das Standardsymbol verwendet]
}
} Zweitens: Drei Möglichkeiten, den Verzeichnisbaum zu laden 1. loadJson(Json) JSON-Objektverzeichnis-Knoten-Array (einmal abgeschlossen) Das JSON-Format ist ein Array von Argumenten für jedes Element eines nodeItem-Objekts
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. loadXml(xml) XML-Stringformat-Knotendaten (einmalige Vervollständigung)
Hinweis: Verwenden Sie das XML-String-Format Beachten Sie, dass der Knoten tagName:nodecode nodetext usw. nicht geändert werden darf, da das Programm direkt durch diesen Namen abgerufen wird
<root>
<item> // Jeder Knoten enthält mehrere Datenwerte
<nodecode><![CDATA[Knotenkodierungswert]]></nodecode>
<nodetext><![CDATA[Knotenname Text]]]></nodetext>
<nodetitle><![CDATA[Knoten-Mausbewegung im Anzeigeprompt-Text]]></nodetitle>
<supnodecode><![CDATA[Node parent encoding]]></supnodecode>
<nodeurl><![CDATA[Node Associated Link Address]]></nodeurl>
<iconexpand><![CDATA[Ikonpfad anzeigen, wenn der Knoten erweitert wird]]></iconexpand>
<iconcollapse><![CDATA[Ikonpfad anzeigen, wenn der Knoten schrumpft]]></iconcollapse>
</item> ... ...
</root>
3. Fügen Sie Knotenelemente manuell einzeln hinzu (zwei Schritte bis zum Abschluss) über die Methode addNodeItem(nodeItem) über die Methode der Plug-in-Objekte
Du kannst einen Baum erstellen, indem du diese Methode manuell über das Plugin-Objekt makeTree() aufrufst.
Drittens: Ereignismethode zur Reorganisation der Beziehung zwischen Untergebenen und Untergebenen im Verzeichnisbaum Durch diese Methode können wir das Problem lösen, dass unser Frontend nicht mehr gemäß der Beziehung zwischen Untergebenen und Untergebenen unterscheiden muss. Viertens: Das Obige ist nur eine kurze Einführung in die wichtigsten Lade- und Reorganisationsmethoden von Tree. Im Folgenden veröffentlichen wir den vollständigen JS-Plugin-Code mit ausführlichen Kommentaren im Code Plug-in-Funktionen: überprüfen, einzeln, erweitern, falten, Knotenverbindung anzeigen/ausblenden, Unterstützung für das Einfügen von Knoten, Löschen von Knoten, Anpassen von Knotensymbolen, Knotenauswahl setzen, Verzeichnisbaum-Auswahlknoten erhalten (Unterstützung für XML, JSON usw.). Rechtsklickmenü (derzeit nicht unterstützt, da die Pop-up-Ebene verwendet werden muss, diese Funktion wird blockiert und entfernt) Unterstützung für Knotenklicks, Doppelklicks, Knotenauswahl-Änderungsereignisse usw. Der letzte Darstellungseffekt Anhang herunterladen:
Tree_Demo.rar
(54.71 KB, Anzahl der Downloads: 1)
| 
Veröffentlicht am 11.07.2019 11:20:12
|
|
|
|
