[JS] [Ztree]ztree Tree Component shift multiple-selection feature implementation __javascript Zone

Recently in the study of the Ztree tree components, learned a lot of features, including the right menu, shift, and other functions, shift more features online data is relatively small, so record down.

First of all, to normal use of ztree, of course, the introduction of its JS, CSS files;

Second, the normal initialization of a tree, you can refer to the official website Oh;

Finally, to implement shift-Select, the code is as follows

1 Define a global variable: var nodes=null;

2 Use the callback function to Beforeclick the event, in which the selected node is logged, with the following code:

var treeobj = $.fn.ztree.getztreeobj (Treeid);
nodes = Treeobj.getselectednodes ();

3 Use the callback function onclick event to handle the shift multiple selection function in the event, as follows:

var obj = $.fn.ztree.getztreeobj (Treeid);
if (nodes!=null&&nodes.length>0) {
var isshift = Event.shiftkey;
if (isshift) {//If the SHIFT key is pressed
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 ('_') [node flag row number of the last node selected before the 1];//shift key pressed
var lastnode=node.tid.split ('_') [1];//node flag row number of the last selected node
var Count=lastnode-firstnode;
if (count>0) {//greater than 0, check all down
for (Var i=1;i
Nodenew=nodenew.getnextnode ();
Obj.selectnode (nodenew,true);
}
}else{//is less than 0, check up all
For (Var i=1;i< (-count); i++) {
Nodenew=nodenew.getprenode ();
Obj.selectnode (nodenew,true);
}
}
}

This allows you to implement a simple shift multiple selection feature.

This method may not be perfect, the number of nodes selected during shift is too many, the efficiency is very slow, but it is also a way, but also want to have a better way to give advice.

Original Address ******************************

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