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
Führen Sie die erforderlichen js ein
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:
|
<<: Detaillierte Erklärung der Verwendung von Nginx proxy_redirect
>>: CentOS7 verwendet RPM-Paket zur Installation von MySQL 5.7.18
Artikel empfehlen
Vue-Elternkomponente ruft Funktionsimplementierung der Unterkomponente auf
Die übergeordnete Vue-Komponente ruft die Funktio...
Element Tabelle Tabellenkomponente Mehrfeld (Mehrspalten) Sortiermethode
Inhaltsverzeichnis brauchen: Aufgetretene Problem...
Eine kurze Diskussion über bedingte Kodierung und Seitenlayout der VUE-Uni-App
Inhaltsverzeichnis Bedingte Kompilierung Seitenla...
Tutorial der MySQL-Reihe zum Verständnis der Verwendung der Schlüsselwörter „union“ (alles), „limit“ und „exists“
Inhaltsverzeichnis 1.union: Sie können Abfrageerg...
9 superpraktische CSS-Tipps, die Designern und Entwicklern helfen
Im Kopf eines Webdesigners muss viel Wissen im Zus...
Erstellen eines statischen Jenkins Docker-Agentknotens
Ein statischer Knoten ist auf einer Maschine fixi...
Installieren und konfigurieren Sie SSH in CentOS7
1. Installieren Sie openssh-server yum install -y...
XHTML-Einführungstutorial: Webseitenkopf und DTD
Obwohl Kopf und DTD nicht auf der Seite angezeigt...
Installieren Sie Docker auf Centos7 (neueste Version 2020 verfügbar, einfach kopieren und einfügen)
Informationen zur Bedienung finden Sie hier in de...
Wie stellt MySQL eine Verbindung zum entsprechenden Clientprozess her?
Frage Wie können wir bei einer bestimmten MySQL-V...
Detaillierte Erläuterung des chinesischen Konfigurationsschemas my.ini zur MySql-Optimierung: InnoDB, 4 GB Speicher und mehrere Abfragen
Dieser Artikel ist eine MySQL-Konfigurationsdatei...
Zusammenfassung der Dateninteraktion zwischen Docker-Container und Host
Vorwort Beim Einsatz von Docker in einer Produkti...
Detaillierte Erklärung der Vue-Anmeldung und -Abmeldung
Inhaltsverzeichnis Login-Geschäftsprozess Impleme...
CentOS 6.5 i386 Installation MySQL 5.7.18 ausführliches Tutorial
Die meisten Leute kompilieren MySQL und legen es ...
Die heißesten Trends im Webdesign UI im Jahr 2013 Die beliebtesten UI-Designs
Die Zeit vergeht wie im Flug und in nur sechs Tag...