Ztree 多选，显示勾选的路径

项目要求，需要向后台传递已经勾选的路径，如 l1-a, l1-l3-c,l1-l3-d;(如果是全选状态则只传递全选状态的路径，不传子节点)。

具体可以参考jQ  Ztree 的 v3.5 版本  

Metro 风格的demo

 1 var mesetting = {
 2             view: {
 3                 addHoverDom: addHoverDom,
 4                 removeHoverDom: removeHoverDom,
 5                 selectedMulti: true,
 6                 showIcon:true,
 7                 showLine:true,
 8                 dblClickExpand: false//禁用双击展开父节点功能
 9             },
10             edit: {
11                 enable: false,
12                 showRemoveBtn: false,//设置删除按钮是否显示
13                 showRenameBtn: false,//设置编辑按钮是否显示
14                 drag: {//禁用拖拽
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         };

主要描述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            });

上面代码，oArr 取的是根节点的路径，nArr 取出的是根节点为半选状态的路径；

主要遇到一个坑就是下面要描述的 运用递归去 找出我要的路径结果：

 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             }

 

然后 发现这个path 是含有空的一个数组，希望大神能给看看上面情况。我处理的是对数组进行去空了操作

 1 //去除数组中的空值
 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             }

以上仅代表个人在使用这个ztree中碰到多选构造路径遇到的麻烦。

转载于:https://www.cnblogs.com/continue666/p/7986834.html