Dieses Mal zeige ich Ihnen, wie Sie das Problem lösen können, dass das Hinzufügen von untergeordneten Knoten immer wiederholt wird, wenn zTree asynchron geladen wird. Was sind? die Vorsichtsmaßnahmen? Das Folgende ist ein praktischer Fall.
zTree ist ein multifunktionales „Baum-Plug-in“, das von jQuery implementiert wird. In diesem Artikel werde ich das Duplizierungsproblem beim Hinzufügen untergeordneter Knoten beim asynchronen Laden von jQuery zTree 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. Unnötiger Code muss nicht geladen werden
Übernimmt 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 alle Skin-/ Benutzerdefiniertes Symbol (verlassen Sie sich auf CSS)
Unterstützt eine äußerst flexible Kontrollkästchen- oder Optionsauswahlfunktion
Bietet eine Vielzahl von Ereignissen Antwortrückrufe
Flexible Bearbeitungsfunktionen (Hinzufügen/Löschen/Ändern/Überprüfen), Sie können Knoten nach Belieben ziehen und ablegen, und Sie können mehrere Knoten per Drag & Drop ziehen
Auf einer Seite können mehrere Tree-Instanzen gleichzeitig generiert werden
Einfache Parameterkonfiguration, um flexible und veränderbare Funktionen zu erreichen
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 });
});
}Nach dem Login kopieren
Als ich ursprünglich untergeordnete Knoten direkt hinzugefügt habe und der übergeordnete Knoten nicht erweitert wurde, würden zwei identische untergeordnete Knoten hinzugefügt (die Zum ersten Mal überprüfte ich, ob der übergeordnete Knoten erweitert wurde, aber es stellte sich heraus, dass beim Erweitern des übergeordneten Knotens zwei identische untergeordnete Knoten hinzugefügt wurden (wie kann dieses Problem gelöst werden)?
Methode 1
Ändern Sie die Frage
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 });Nach dem Login kopieren
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 });
}Nach dem Login kopieren
. Gelöst, aber wurde es optimiert? 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");Nach dem Login kopieren
Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Nachdem Sie die Methode gemeistert haben, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website, um weitere spannende Inhalte zu erhalten!
Empfohlene Lektüre:
So entdecken Sie versteckte Elemente im Leerraum
So erreichen Sie eine nicht aktualisierungsfreie Verknüpfung von Drop-Down-Boxen mit Ajax
Ausführliche Erklärung für keine neue Konstruktion
jQuery-Implementierung der Drop-Down-Menünavigation
Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass das Hinzufügen untergeordneter Knoten immer wiederholt wird, wenn zTree asynchron geladen wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
