jQuery Treeview-Baumstrukturanwendung

In diesem Artikelbeispiel wird der Anwendungscode der jQuery Treeview-Baumstruktur zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Nach der Anwendung von Bootstrap-Treeview habe ich versucht, dieses Problem mit jQuery-Treeview zu lösen und meine Lösung aufgezeichnet, aber sie ist möglicherweise nicht die beste.

Erforderliches CSS einführen

jquery.treeview.css

Führen Sie die erforderlichen js ein

jquery-3.0.0.js
jquery.treeview.js

Schreiben Sie die Seite treeview_jQuery.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">
 <Titel>TreeViewByJQuery</Titel>
 <link href="../static/css/jquery.treeview.css" rel="stylesheet">
 <script src="../static/js/jquery-3.0.0.js"></script>
 <script src="../static/js/jquery.treeview.js"></script>
</Kopf>
<Skript>
 $(Funktion () {
 $.ajax({
 Typ: „GET“,
 url:"/tree/treeView.do", //Backend-Schnittstellenpfad async:false, //Nicht asynchron dataType:"json", //Datenformat ist json
 Erfolg:Funktion (Daten) {
 var html = buildTree(data); //Rufen Sie buildtree() auf, um eine Baumstruktur zu erstellen $("#tree").append(html); //Fügen Sie die Baumstruktur dem DOM-Element hinzu }
 });

 $("#tree").treeview({}); //Verwenden Sie jquery.treeview, um die erstellte Attributstruktur in einen dynamischen Baum umzuwandeln });
 /*
 Greifen Sie rekursiv auf die vom Hintergrund zurückgegebenen Daten zu und konstruieren Sie eine Baumstruktur durch das Ausschreiben von HTML-Code*/
 var buildTree = Funktion(Daten){
 var html="";
 $.each(data,function(i,n){ //Alle Baumknoten in den aktuellen Daten durchlaufenhtml = html+"<li><span class=\"folder\">"+n.text+"</span>"; //Der aktuelle Knoten ist der übergeordnete Knotenvar children = buildTree(n.nodes); //Alle untergeordneten Knoten des aktuellen Knotens rekursiv durchlaufenhtml = html+"<ul>"+children+"</ul>"; //Den übergeordneten Knoten und den untergeordneten Knoten zusammenfügen})

 return html; //Gibt die erstellte Baumstruktur zurück}

</Skript>
<Text>
<ul id="Baum" Klasse="Dateibaum"></ul>

</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Die auf MVC5- und Bootstrap-Daten (Teil 2) basierende jQuery TreeView-Baumsteuerung unterstützt die Sammlung von JSON-Strings und Listen
Die auf MVC5- und Bootstrap-Daten (I) basierende jQuery TreeView-Baumsteuerung unterstützt die Sammlung von JSON-Strings und Listen
jQuery implementiert das Klicken auf den übergeordneten TreeView-Textknoten zum Erweitern/Reduzieren untergeordneter Knoten
Leistungsstarke TreeView-Ergänzung basierend auf JQUERY in ASP.NET
Erstellen eines leistungsstarken TreeView basierend auf jQuery (asp.net)
Fügen Sie den Implementierungscode des Rechtsklickmenüs zu jQuery.Treeview hinzu
Jquery.TreeView kombiniert ASP.Net und Datenbank, um eine Menünavigationsleiste zu generieren
jQuery-Lernlektion 6: Implementieren eines Ajax TreeView
JS-Methode (jquery) zum Auswählen des Baumdatenknotens des TreeView-Steuerelements
jQuery-Baumstrukturselektor

<<: Detaillierte Erklärung der Verwendung von Nginx proxy_redirect

>>: CentOS7 verwendet RPM-Paket zur Installation von MySQL 5.7.18

Detaillierte Erläuterung der häufig verwendeten Funktionen copy_from_user open read write in der Linux-Treiberentwicklung

Artikel

Detaillierte Erklärung der Socket (TCP)-Bindung aus dem Linux-Quellcode

So lösen Sie das Problem, dass sich Ubuntu 18.04 wiederholt anmeldet/auf der Boot-Oberfläche hängen bleibt/die grafische Oberfläche nicht aufrufen kann

Artikel

Allgemeine Probleme mit der Regelpriorität beim Nginx-Standort

jQuery Treeview-Baumstrukturanwendung

Detaillierte Erläuterung der häufig verwendeten Funktionen copy_from_user open read write in der Linux-Treiberentwicklung

Detaillierte Erklärung der Socket (TCP)-Bindung aus dem Linux-Quellcode

Detaillierte Erläuterung des Überwachungsmethodenfalls von Vue

Führen Sie Datenstatistiken für verschiedene Werte desselben Felds in SQL durch

So lösen Sie das Problem, dass sich Ubuntu 18.04 wiederholt anmeldet/auf der Boot-Oberfläche hängen bleibt/die grafische Oberfläche nicht aufrufen kann

Allgemeine Probleme mit der Regelpriorität beim Nginx-Standort

Lösung für das Problem, dass der MySQL-Dienst unter Windows nicht gestoppt oder gelöscht werden kann

JavaScript realisiert die Generierung und Überprüfung von Zufallscodes

Lösung für MySQL-Fehlercode 1862 Ihr Passwort ist abgelaufen

So stellen Sie ein Vue-Projekt unter Nginx bereit

Artikel empfehlen

Konfigurieren Sie eine Selenium-Umgebung basierend auf Linux und implementieren Sie den Betrieb

Detaillierte Erklärung: Die MySQL-Ausführungsplan-ID ist leer (Schlüsselwort UNION).

Detaillierte Erklärung des Lebenszyklus einer Angular-Komponente (I)

Versionsnummern in CSS- und JS-Links in HTML (Cache aktualisieren)

Detaillierte Erläuterung der Lösung zur festen Positionierung von CSS-Unterelementen relativ zum übergeordneten Element

Tutorial zur Verwendung von Hyperlink-Tags in XHTML

So verwenden Sie Linux-Befehle zum Konvertieren und Zusammenfügen von Audioformaten

So verwenden Sie Vuex in einem Vue-Projekt

Vergleichende Analyse von UI-Anwendungen auf Bild-Social-Networking-Sites (Abbildung)

Das Vue-Projekt implementiert einen grafischen Überprüfungscode

Vor- und Nachteile gängiger MySQL-Speicher-Engines

Einfaches Anwendungsbeispiel für eine rekursive Vue-Komponente

js zum Schreiben des Karusselleffekts

So lösen Sie das Phantomleseproblem in MySQL

So ändern Sie den Hostnamen in Linux dauerhaft