So lösen Sie das Problem, dass das Hinzufügen untergeordneter Knoten immer wiederholt wird, wenn zTree asynchron geladen wird

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 });
   });
}

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 });

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 });
    }

. 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");

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!