[js][zTree]zTree树组件shift多选功能的实现

最近在研究ZTree树组件，学习了很多功能，包括右键菜单、shift多选等功能，shift多选功能网上资料比较少，所以记录下来。

首先，要正常使用zTree，当然少不了引入它的js、css文件；

其次，正常初始化一棵树，可以参考官方网站哦；

最后，实现shift多选，代码如下

1）定义一个全局变量：var nodes=null;

2）使用回调函数beforeClick事件，在该事件中记录已经选中的节点，代码如下：

   var treeObj = $.fn.zTree.getZTreeObj(treeId);
   nodes = treeObj.getSelectedNodes();

3）使用回调函数onClick事件，在该事件中处理shift多选功能，代码如下：

var obj = $.fn.zTree.getZTreeObj(treeId);
 if(nodes!=null&&nodes.length>0){
  var isShift = event.shiftKey;
  if(isShift){//如果是按下shift键
   var nodeNew;
   
   for(var i=0;i
    nodeNew=nodes[i];
    obj.selectNode(nodeNew,true);
   }
   selectNodes(node,nodeNew,obj);
  }
 }

 

function selectNodes(node,nodeNew,obj){
 var firstNode=nodeNew.tId.split('_')[1];//shift键按下之前的选中的最后一个节点的节点标志行数
 var lastNode=node.tId.split('_')[1];//最后选中的节点的节点标志行数
 var count=lastNode-firstNode;
 if(count>0){//大于0，向下全部选中
  for(var i=1;i
   nodeNew=nodeNew.getNextNode();
   obj.selectNode(nodeNew,true);
  }
 }else{//小于0，向上全部选中
  for(var i=1;i<(-count);i++){
   nodeNew=nodeNew.getPreNode();
   obj.selectNode(nodeNew,true);
  }
 }
}

 

这样就可以实现简单的shift多选功能了。

此方法也许不是很完美，shift多选时选择的节点个数太多时，效率很慢，但总归也是一种方法啦，还希望有更好方法的人给提提意见。

******************************原文地址******************************

http://blog.sina.com.cn/s/blog_5ec8d6890101iye4.html