jQuery zTree repeatedly adding child nodes during async process-JS Tutorial-php.cn

jQuery zTree repeatedly adding child nodes during async process

php中世界最好的语言

Release： 2018-04-19 14:10:02

Original

1581 people have browsed it

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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!