Ztree 多选,显示勾选的路径

2018-06-24 00:57:33来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

项目要求,需要向后台传递已经勾选的路径,如 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中碰到多选构造路径遇到的麻烦。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript学习笔记(十五)——对象之Date,RegExp,JSON

下一篇:JavaScript 事件委托详解