jQuery zTree fügt während des asynchronen Prozesses wiederholt untergeordnete Knoten hinzu

Dieses Mal werde ich Ihnen das wiederholte Hinzufügen von untergeordneten Knoten durch jQuery zTree während des asynchronen Prozesses vorstellen Hinweise zum Umgang mit dem wiederholten Hinzufügen von untergeordneten Knoten durch jQuery zTree während des asynchronen Prozesses Ja, die folgenden sind praktische Fälle, werfen wir einen Blick darauf.

zTree Einführung

zTree ist ein multifunktionales „Baum-Plug-in“, das von 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, und das ist auch möglich im Grunde sogar unter IE6 Flash Sale gemacht

• 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 (basierend auf CSS)

• Unterstützt äußerst flexible Kontrollkästchen- oder Radioauswahlfunktion

• Bietet eine Vielzahl von EreignissenAntwortrü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 ziehen

• in mehreren Bauminstanzen können gleichzeitig auf einer Seite generiert werden

• Einfache Parameterkonfiguration realisiert flexible und veränderbare 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 der übergeordnete Knoten ursprünglich direkt hinzugefügt wurde, wurden zwei identische untergeordnete Knoten hinzugefügt (beim ersten Mal habe ich beurteilt, ob der übergeordnete Knoten erweitert wurde). Es werden (zum ersten Mal) zwei identische untergeordnete Knoten hinzugefügt.

Methode 1

Wird

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

Wechseln Sie zu

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 lässt sich lösen, aber gibt es eine Optimierung? Ich habe das Gefühl, dass es nach der Änderung zu viele Codekategorien gibt

Der beste Weg

Scheint doch nicht so problematisch zu sein, oder? Ich habe vor zwei Tagen eine ähnliche Frage beantwortet.

1. Nachdem Sie geklickt haben, um einen untergeordneten Knoten hinzuzufügen, übertragen Sie ihn direkt per Ajax in den Hintergrund, um die Daten zu speichern und das Erfolgsereignis zu erfassen

2. Wenn Ajax erfolgreich ist, können Sie mithilfe des Attributs „treeNode.zAsync“ feststellen, ob der übergeordnete Knoten asynchron geladen wurde. Wenn es „false“ ist, wird reAsyncChildNodes direkt aktualisiert. Wenn es „true“ 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");

Glauben Sie es. Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So konfigurieren Sie Webpack mit JQuery

Detaillierte Schritte zum Zusammenklappen des Akkordeon-Faltpanels von jQuery EasyUI

jQuery-Aktionslistensoldaten, um dynamisch neue Elemente hinzuzufügen

Das obige ist der detaillierte Inhalt vonjQuery zTree fügt während des asynchronen Prozesses wiederholt untergeordnete Knoten hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!