在C/S程序开发中,想要实现类似tree或grid中ctrl和shift键多选的功能,一般底层控件都默认支持的,你不需要做什么,但在Web开发中,想要实现ctrl,shift配合鼠标的多选功能并不是一件十分容易的事情,本文将对这方面进行展开的思路讨论,并附上关键的代码片段,有兴趣的读者可以一起探讨研究。
这里我要实现一个tree和table控件的关于ctrl和shift键的多选功能,先来说tree,我的处理思路如下:
- tree中针对每个节点加上索引值,如1,2,3,……,便于提高遍历效率
- 获取之前选中的树节点,并获取索引值,标记为:istart
- 获取当前选中的树节点,并获取索引值,标记为:iend
- 如istart>iend,将两值调换,因为shift键可以往上选取
这个代码片段看起来可能类似这样(伪代码):
$("树节点").click(function(e) {
if(!e.ctrlKey&&!e.shiftKey) {
//删除所有节点的选中样式
}
if(e.shiftKey) {
var preSelectedLi = 得到选中的开始节点;
var thisSelectedLi = 得到shift键按下的当前节点;
var temp1 = 获取开始的索引值;
var temp2 = 获取结束的索引值;
if(temp1&&temp2&&temp1.length==2&&temp2.length==2){
if(temp1[0]===temp2[0]){
var istart = 开始值;
var iend = 结束值;
var itemp;
if(istart>iend){
itemp = iend;
iend = istart;
istart = itemp;
}
for(var i=istart;i<=iend;i++){
//得到的树节点加入选取样式
}
}else{
//删除树节点样式
}
}else{
//删除树节点样式
}
}else{
//toggle树节点样式
}
});
table的多选控制非常类似,少的一个步骤是不用给树节点加入索引我们就可以正确的选取,如果你使用JQ的话,可以利用index函数,如果你直接用js,可以利用rowIndex属性获得!