Repeated subnode addition during asynchronous jQuery zTree Loading

Repeated subnode addition during asynchronous jQuery zTree Loading

Introduction to zTree

ZTree is a multi-functional "tree plug-in" implemented by jQuery ". ZTree features superior performance, flexible configuration, and a combination of multiple functions.

ZTree is an open-source free software (MIT license ). If you are interested in zTree or are willing to fund the continued development of zTree, you can donate.

• ZTree v3.0 separates the core code by function, and does not need to load unnecessary code.
• Using the delayed loading technology, tens of thousands of nodes can be easily loaded, even in IE6, the second kill can be basically achieved
• Compatible with IE, FireFox, Chrome, Opera, Safari, and other browsers
• JSON data is supported.
• Supports static and Ajax asynchronous loading of node data
• Supports any skin replacement/custom icons (depending on css)
• Supports extremely flexible checkbox or radio Selection
• Multiple Event Response callbacks
• Flexible editing (addition, deletion, modification, and query) functions. You can drag and drop nodes at Will or drag multiple nodes.
• Multiple Tree instances can be generated simultaneously on one page.
• Simple parameter configuration for flexible and Variable Functions

Original problem

// Add a node. The product and version function addNode (event) {rMenu.css ({"visibility": "hidden"}); var treeNode = zTree. getSelectedNodes () [0]; var pid; var nodeName; var treelevel; if (! TreeNode & event.tar get. tagName. toLowerCase ()! = "Button" & amp; events (event.tar get ). parents (""). length = 0) {// Add Product node pid = 0; treeNode = null; treelevel = 1;} else if (treeNode) {// Add version node pid = treeNode. id; treelevel = 2 ;}$. post ("AddNode. action ", {type: treelevel, id: pid}, function (nodeIdAndName) {var params =/([^ \ |] +) \ | ([^ \ |] +) /. exec (nodeIdAndName); if (! ((! TreeNode & event.tar get. tagName. toLowerCase ()! = "Button" & amp; events (event.tar get ). parents (""). 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 a child node was directly added, if the parent node was not expanded, two identical child nodes will be added (the first time). Later, I determined whether the parent node was expanded, however, if the parent node is expanded, two identical child nodes will be added (the first time). How can this problem be solved?

Method 1

Set

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

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 that there are too many classes of changed code.

Optimal Solution

Doesn't it seem so troublesome? I answered a similar question two days ago.

1. Click "add subnode" and send ajax to the background to save data and capture success events.

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