Ztree Multiple Selection, Show Checked Path

The project requires that the checked paths, such as l1-a, l1-l3-c,l1-l3-d, be passed to the background; (in the case of full selection, only the path in full selection is passed, and no child nodes are passed).

Refer to v3.5 version of jQ Ztree for details

Metro-style demo

 1 var mesetting = {
 2             view: {
 3                 addHoverDom: addHoverDom,
 4                 removeHoverDom: removeHoverDom,
 5                 selectedMulti: true,
 6                 showIcon:true,
 7                 showLine:true,
 8                 dblClickExpand: false//Disable double-click to expand parent node functionality
 9             },
10             edit: {
11                 enable: false,
12                 showRemoveBtn: false,//Set whether the delete button is displayed
13                 showRenameBtn: false,//Set whether the Edit button is displayed
14                 drag: {//Disable dragging
15                     isCopy: false,
16                     isMove: true
17                 }
18             },
19             check: {
20                 enable: true
21             },
22             data: {
23                 simpleData: {
24                     enable: true
25                 }
26             },
27             callback: {
28                 onClick: onClick,
29                 onCheck: onCheck
30             }
31         };

Main description onCheck:

 1 var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
 2            var nodes = treeObj.getCheckedNodes(true);
 3            var oArr = [],nArr = [],oId;
 4            $.each(nodes,function (index,item){
 5                if (item.check_Child_State == 2 && !item.pId){
 6                    oArr.push(item);
 7 
 8                }
 9 
10                if (item.check_Child_State == 2 && item.pId){
11                    oId = item.id;
12                    nArr.push(item);
13                } else if (item.check_Child_State == -1 && item.pId != oId){
14                    nArr.push(item);
15                }
16            });

In the code above, oArr takes the path of the root node, and nArr takes the path of the semi-selected root node.

The main pit encountered is the use of recursion described below to find the path results I want:

 1 function getFilePath(treeNode){
 2                     if(treeNode==null)return "";
 3                       var filename = treeNode.name;
 4                       rootName = treeNode.name;
 5                       var pNode = treeNode.getParentNode();
 6 
 7                       if(pNode!=null){
 8 //                        oldName == '' ? path.push(pNode.name + ',' + filename) : path.push(pNode.name + ',' + oldName);
 9                         oldName == '' ? newName = pNode.name + ',' + filename : newName = pNode.name + ',' + oldName;
10                         oldName = pNode.name + ',' + filename;
11                       filename = getFilePath(pNode);
12 
13                       }
14                     path.push(newName);
15                       return filename,oldName = '',newName = '';
16             }

 

Then I find that the path is an empty array, and I hope the God can see it.I'm dealing with emptying arrays

 1 //Remove null values from the array
 2             function trimSpace(array){
 3                  for(var i = 0 ;i<array.length;i++)
 4                  {
 5                      if(array[i] == "" || typeof(array[i]) == "undefined")
 6                      {
 7                               array.splice(i,1);
 8                               i= i-1;
 9 
10                      }
11                  }
12                  return array;
13             }

The above only represents the troubles individuals encounter when using this ztree with multiple-choice construction paths.

Tags: Javascript

Posted on Tue, 14 Jul 2020 10:56:53 -0400 by jsnyder2k