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

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