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
Muss MySql ein Commit durchführen?
Ob MySQL bei der Ausführung von Vorgängen wie Ein...
Fallstricke basierend auf MySQL-Standardsortierregeln
Der Standardtyp varchar in MySQL ist case-insensi...
Detaillierte Erläuterung des Aufbaus und der Verwendung des Docker Private Warehouse
Das Image kann auf hub.docker.com gespeichert wer...
JavaScript zum Erzielen eines Fortschrittsbalkeneffekts
In diesem Artikelbeispiel wird der spezifische Ja...
Schritte zum Upgrade von CentOS6 auf Glibc
Inhaltsverzeichnis Hintergrund Kompilieren Sie gl...
Mysql Workbench - Abfragemethode für MySQL-Datenbanken
Mysql Workbench ist ein Open-Source-Datenbankclie...
Detaillierte Erklärung des Kopierobjekts von jQuery
<!DOCTYPE html> <html lang="de"...
Analyse der Implementierung der MySQL-Anweisungssperre
Zusammenfassung: Analyse von zwei MySQL SQL-Anwei...
Detaillierte Erklärung zum Abrufen der IP-Adresse eines Docker-Containers
1. Nach dem Betreten des Containers Katze /etc/ho...
Eine umfassende Zusammenfassung häufig verwendeter Anweisungen in MySQL (unbedingt lesen)
Die unten zusammengefassten Wissenspunkte werden ...
So setzen Sie das Passwort zurück, wenn Sie es in MySQL8 vergessen haben (die alte MySQL-Methode funktioniert nicht)
Die Befehlszeile mysqld –skip-grant-tables kann i...
So erstellen Sie schnell zig Millionen Testdaten in MySQL
Bemerkung: Die Datenmenge in diesem Artikel beträ...
MySQL-Optimierung Verbindungsoptimierung
Im Artikel MySQL-Optimierung: Cache-Optimierung w...
Detailliertes Beispiel der MySQL curdate()-Funktion
Einführung in die MySQL CURDATE-Funktion Bei Verw...
Verwendung und Unterschied von Vue.set() und this.$set()
Wenn wir Vue zur Entwicklung verwenden, kann eine...