Web开发中利用Ctrl，Shift键鼠标多选的统制

Web开发中利用Ctrl，Shift键鼠标多选的控制

在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属性获得！

?

查看更多 下一篇