How to solve the problem that adding child nodes is always repeated when zTree is loaded asynchronously

This time I will show you how to solve the problem of adding sub-nodes that are always repeated when zTree is loaded asynchronously. How to solve the problem of adding sub-nodes that are always repeated when zTree is loaded asynchronously. What are the precautions? What are the practical cases? Let’s take a look.

zTree is a multi-functional "tree plug-in" implemented by jQuery. Through this article, I will share with you the duplication problem of jQuery zTree asynchronous loading to add child nodes. Friends who need it can refer to it

ZTree Introduction

zTree is A multifunctional "tree plug-in" implemented with jQuery. Excellent performance, flexible configuration, and combination of multiple functions are the biggest advantages of zTree.

zTree is open source and free software (MIT license). If you are interested in zTree or would like to fund the continued development of zTree, you can make a donation.

• zTree v3.0 divides the core code according to functions. Unnecessary code does not need to be loaded.

• adopts lazy loading technology. Tens of thousands of nodes can be loaded easily, even under IE6, it can basically achieve instant killing

• Compatible with IE, FireFox, Chrome, Opera, Safari and other browsers

• Support JSON data

• Support static and Ajax asynchronous loading of node data

• Support any change of skin/custom icon (rely on css)

• Supports extremely flexible checkbox or radio selection function

• Provides a variety of eventsResponse callbacks

• Flexible editing (add/delete/modify/check) functions, you can drag and drop nodes at will, and you can drag and drop multiple nodes

• In one page Multiple Tree instances can be generated at the same time

• Simple parameter configuration to achieve flexible and changeable functions

Original question

//添加结点, 产品和版本
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 });
   });
}

When I originally added child nodes directly, if the parent node was not expanded, two identical child nodes would be added (the first time); later I checked whether the parent node was expanded. However, if the parent node is expanded, two identical child nodes will be added (for the first time). How to solve this problem?

Method 1

The problem can be solved by changing

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

to

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

, but Is there any optimization? I feel like there are too many code categories after the change

The best way

It doesn’t seem to be so troublesome, right? I answered a similar question two days ago.

1. After clicking to add a child node, directly send ajax to the background to save the data and capture the success event

2. When ajax succeeds, you can use the treeNode.zAsync attribute to know whether the parent node is Asynchronous loading has been performed. If it is false, then directly reAsyncChildNodes is refreshed. If it is true, then use 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");

I believe you have mastered it after reading the case in this article. Method, for more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to discover hidden elements in blank spaces

How to achieve non-refresh linkage of drop-down boxes with Ajax

Detailed explanation of no new construction

jQuery implementation of drop-down menu navigation

The above is the detailed content of How to solve the problem that adding child nodes is always repeated when zTree is loaded asynchronously. For more information, please follow other related articles on the PHP Chinese website!