[js][zTree]zTree樹組件shift多選功能的實現__JavaScript專區

最近在研究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