Asynchronous loading using zTree (detailed tutorial)

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 easily loaded, 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 skin change/custom icon (rely on css)

• Support extremely flexible checkbox or radio selection function

• Provide multiple event response callbacks

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

• Multiple Trees can be generated at the same time in one page Example

• Simple parameter configuration to achieve flexible 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 changed. 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 seems like it doesn’t have 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");

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to achieve front-end and back-end separation in the vue project in node

How to implement two queues to represent one in JS Stack

How to implement a single page skeleton screen in Vue

The above is the detailed content of Asynchronous loading using zTree (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!