Asynchrones Laden mit zTree (ausführliches Tutorial)

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!