jQuery zTree repeatedly adding child nodes during async process

This time I will bring you jQuery zTree's repeated addition of child nodes during the asynchronous process, and how to deal with jQuery zTree's repeated addition of child nodes during the asynchronous process. NotesYes Which ones, the following are practical cases, let’s take a look.

zTree Introduction

zTree is a multi-functional "tree plug-in" implemented by 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, and unnecessary code does not need to be loaded.

• adopts lazy loading technology, and tens of thousands of nodes can be easily loaded, even under IE6. Flash Sale

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

• Supports JSON data

• SupportStatic and Ajax asynchronous loading of node data

• Support any change of skin/custom icon (relying 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 Multiple Tree instances can be generated simultaneously in one page

• Simple parameter configuration enables 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 });
   });
}

Originally, when adding child nodes directly, if the parent node was not expanded, two identical child nodes would be added (the first time); later I judged whether the parent node was expanded, but it became if the parent node was expanded. , two identical child nodes will be added (for the first time). How to solve this problem?

Method 1

Will

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

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

The problem can be solved, but is there any optimization? I feel like there are too many code categories after the change

Best approach

## It doesn't seem like it's so troublesome, right? I answered a similar question two days ago.

1. After clicking to add a child node, directly ajax it 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 has been loaded asynchronously. 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 I have read it You have mastered the method in the case of this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to configure webpack with jquery

##jQuery EasyUI operation folding panel accordion detailed steps

jQuery action list soldiers dynamically add new elements to it

The above is the detailed content of jQuery zTree repeatedly adding child nodes during async process. For more information, please follow other related articles on the PHP Chinese website!