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
So erlauben Sie den externen Netzwerkzugriff auf MySQL und ändern das MySQL-Kontokennwort
Als Root-Konto von MySQL verwende ich beim Verbin...
So ändern Sie den Standardspeicherort von Docker-Images (Lösung)
Aufgrund der anfänglichen Partitionierung des Sys...
Verwendung und Unterschiedsanalyse von „Ersetzen in“ und „Einfügen in“ beim Update doppelter Schlüssel in MySQL
Dieser Artikel veranschaulicht anhand von Beispie...
So erstellen Sie eine TAR-Datei von WSL über Docker
Ich habe kürzlich mit der Remote-Entwicklungsfunk...
Beispielcode zur Implementierung der Ellipsenbahnrotation mit CSS3
In letzter Zeit müssen folgende Effekte erzielt w...
Detaillierte Erklärung zum Ändern des Stils von el-select: popper-append-to-body und popper-class
So ändern Sie den Stil der von elementUI bereitge...
Verwendung des Linux-Watch-Befehls
1. Befehlseinführung Der Befehl „Watch“ führt den...
So ändern Sie das Standardnetzwerksegment der Docker0-Brücke in Docker
1. Hintergrund Wenn der Docker-Dienst gestartet w...
Detaillierte Schritte zum Konfigurieren der MySQL-Remoteverbindung unter Alibaba Cloud
Vorwort Wie wir alle wissen, unterstützt das auf ...
So lösen Sie das Problem, dass die Website kein direktes Kopieren von Seiteninhalten oder Informationen zulässt
Heutzutage erlauben viele Websites nicht das direk...
Beispielcode für einen coolen Atemeffekt mit CSS3+JavaScript
Ein einfacher cooler Effekt, der mit CSS3-Animati...
So fügen Sie der Seite über Element UI eine Seitennavigationsleiste hinzu
brauchen Fügen Sie eine Paging-Leiste hinzu, die ...
Linux-Debugging-Tools, die sich Entwickler und Betreiber unbedingt ansehen sollten [Empfohlen]
Der Systemleistungsexperte Brendan D. Gregg hat s...
Die Hintergrundfarbe oder das Bild im Div-Container wächst mit dem Wachstum
Code kopieren Der Code lautet wie folgt: Höhe: au...
Verwenden Sie CSS-Inhaltsattribute, um den Mouseover-Prompt-Effekt (Tooltip) zu erzielen
Warum erzielen wir diesen Effekt? Tatsächlich wir...