zTree ist ein multifunktionales „Baum-Plug-in“, das mit jQuery implementiert wird. In diesem Artikel werde ich das Duplizierungsproblem des asynchronen Ladens von jQuery zTree zum Hinzufügen untergeordneter Knoten erläutern. Freunde, die es benötigen, können darauf verweisen
Einführung in zTree
zTree ist ein multifunktionales „Baum-Plug-in“, das mit jQuery implementiert wird. Hervorragende Leistung, flexible Konfiguration und Kombination mehrerer Funktionen sind die größten Vorteile von zTree.
zTree ist Open Source und freie Software (MIT-Lizenz). Wenn Sie sich für zTree interessieren oder die Weiterentwicklung von zTree finanzieren möchten, können Sie eine Spende tätigen.
zTree v3.0 unterteilt den Kerncode nach Funktionen und unnötiger Code muss nicht geladen werden
Übernimmt die Lazy-Loading-Technologie . Zehntausende Knoten können problemlos geladen werden, selbst unter IE6 kann grundsätzlich ein sofortiges Töten erreicht werden
Kompatibel mit IE, Firefox, Chrome, Opera, Safari und anderen Browsern
Unterstützt JSON-Daten
Unterstützt statisches und asynchrones Ajax-Laden von Knotendaten
Unterstützt jede Skin-Änderung/ Benutzerdefiniertes Symbol (basiert auf CSS)
Unterstützt äußerst flexible Kontrollkästchen- oder Optionsauswahlfunktion
Bietet eine Vielzahl von Rückrufen für Ereignisantworten
Flexible Bearbeitungsfunktionen (Hinzufügen/Löschen/Ändern/Prüfen), Sie können Knoten nach Belieben ziehen und ablegen, und Sie können mehrere Knoten ziehen und ablegen
Mehrere Bäume können gleichzeitig auf einer Seite generiert werden. Beispiel
Einfache Parameterkonfiguration zur Erzielung flexibler Funktionen
Ursprüngliche Frage
//添加结点, 产品和版本 function addNode(event) { rMenu.css({ "visibility": "hidden" }); var treeNode = zTree.getSelectedNodes()[0]; var pid; var nodeName; var treelevel; if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) { //添加产品结点 pid = 0; treeNode = null; treelevel = 1; } else if (treeNode) { //添加版本结点 pid = treeNode.id; treelevel = 2; } $.post( "AddNode.action", { type: treelevel, id: pid }, function(nodeIdAndName) { var params = /([^\|]+)\|([^\|]+)/.exec(nodeIdAndName); if (!((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.open)) { zTree.expandNode(treeNode, true); } treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel }); }); }
Wenn ich untergeordnete Knoten direkt hinzufügte und der übergeordnete Knoten nicht erweitert wurde, wurden zwei identische untergeordnete Knoten hinzugefügt (beim ersten Mal). wurde erweitert, aber geändert. Wenn der übergeordnete Knoten erweitert wird, werden (zum ersten Mal) zwei identische untergeordnete Knoten hinzugefügt.
Methode 1
Ändern Sie
if (!((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.open)) { zTree.expandNode(treeNode, true); } treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel });
in
if(!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) { treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel }); } else if(treeNode.open) { if(treeNode.isParent) { zTree.reAsyncChildNodes(treeNode, "refresh"); } else { treeNode.isParent=true; zTree.reAsyncChildNodes(treeNode, "refresh"); } } else { zTree.expandNode(treeNode, true); treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel }); }
Das Problem kann gelöst werden, ist es aber Gibt es eine Optimierung? Ich habe das Gefühl, dass es nach der Änderung zu viele Codekategorien gibt
Der beste Weg
Es scheint nicht so problematisch zu sein, oder? ? Ich habe vor zwei Tagen eine ähnliche Frage beantwortet.
1. Nachdem Sie zum Hinzufügen eines untergeordneten Knotens geklickt haben, senden Sie Ajax direkt in den Hintergrund, um die Daten zu speichern und das Erfolgsereignis zu erfassen.
2. Wenn Ajax erfolgreich ist, können Sie treeNode.zAsync verwenden Attribut, um zu wissen, ob der übergeordnete Knoten asynchron geladen wurde. Wenn es falsch ist, wird reAsyncChildNodes direkt aktualisiert. Wenn es wahr ist, verwenden Sie addN...
if ((!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) || treeNode.zAsync) treeNode = zTree.addNodes(treeNode, { id: params[1], pid: pid, isParent: "true", name: params[2], editable: "true", treelevel: treelevel }); else zTree.reAsyncChildNodes(treeNode, "refresh");
Das Obige ist das, wofür ich kompiliert habe Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
So erreichen Sie die Front-End- und Back-End-Trennung im Vue-Projekt im Knoten
So implementieren Sie zwei Warteschlangen, um eine im JS-Stack darzustellen
So implementieren Sie einen einseitigen Skelettbildschirm in Vue
Das obige ist der detaillierte Inhalt vonAsynchrones Laden mit zTree (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!