按CTRL,SHIFT,ALT等键扩展easyui的datagrid多选实现
//------------------------------------------------------------------------------- // 当然页面文件中还需要引入的文件如下： // easyui.css 和其它页面用到的CSS文件 // jquery-1-8-3-min.js, easyui-lang-zh_CN.js, jquery-easyui-min.js, datagrid-detailview.js, 和其它页面用到的JS文件 //------------------------------------------------------------------------------- // 结合SHIFT,CTRL,ALT键实现单选或多选 //------------------------------------------------------------------------------- var KEY = { SHIFT:16, CTRL:17, ALT:18, DOWN:40, RIGHT:39, UP:38, LEFT:37}; var selectIndexs = {firstSelectRowIndex:0, lastSelectRowIndex:0}; var inputFlags = {isShiftDown:false, isCtrlDown:false, isAltDown:false} function keyPress(event){//响应键盘按下事件 var e = event || window.event; var code = e.keyCode | e.which | e.charCode; switch(code) { case KEY.SHIFT: inputFlags.isShiftDown = true; $('#dataListTable').datagrid('options').singleSelect = false; break; case KEY.CTRL: inputFlags.isCtrlDown = true; $('#dataListTable').datagrid('options').singleSelect = false; break; /* case KEY.ALT: inputFlags.isAltDown = true; $('#dataListTable').datagrid('options').singleSelect = false; break; */ default: } } function keyRelease(event) { //响应键盘按键放开的事件 var e = event || window.event; var code = e.keyCode | e.which | e.charCode; switch(code) { case KEY.SHIFT: inputFlags.isShiftDown = false; selectIndexs.firstSelectRowIndex = 0; $('#dataListTable').datagrid('options').singleSelect = true; break; case KEY.CTRL: inputFlags.isCtrlDown = false; selectIndexs.firstSelectRowIndex = 0; $('#dataListTable').datagrid('options').singleSelect = true; break; /* case KEY.ALT: inputFlags.isAltDown = false; selectIndexs.firstSelectRowIndex = 0; $('#dataListTable').datagrid('options').singleSelect = true; break; */ default: } }
2，HTML代码,在页面增加加载数据的位置和在body中增加响应键盘事件：
<body class="body01" onkeydown="javascript:keyPress(event);" onkeyup="javascript:keyRelease(event);"> <!-- 数据加载存放位置 --> <div> <table id="dataListTable"></table> </div>
3，在datagrid请求代码的onClickRow事件中增加操作代码，onClickRow单击事件如下：
onClickRow:function(index,row){ //-------------for TEST 结合SHIFT,CTRL,ALT键实现单选或多选---------------- if(index != selectIndexs.firstSelectRowIndex && !inputFlags.isShiftDown ){ selectIndexs.firstSelectRowIndex = index; //alert('firstSelectRowIndex, sfhit = ' + index); } if(inputFlags.isShiftDown ) { $('#dataListTable').datagrid('clearSelections'); selectIndexs.lastSelectRowIndex = index; var tempIndex = 0; if(selectIndexs.firstSelectRowIndex > selectIndexs.lastSelectRowIndex ){ tempIndex = selectIndexs.firstSelectRowIndex; selectIndexs.firstSelectRowIndex = selectIndexs.lastSelectRowIndex; selectIndexs.lastSelectRowIndex = tempIndex; } for(var i = selectIndexs.firstSelectRowIndex ; i <= selectIndexs.lastSelectRowIndex ; i++){ $('#dataListTable').datagrid('selectRow', i); } } //-------------for TEST 结合SHIFT,CTRL,ALT键实现单选或多选---------------- }
4，参考的datagrid请求代码：
; $(function(){ $('#dataListTable').datagrid({ url:'xpath/jsonData01.json', height:(screen.height == 900 ? 660 : 950), nowrap:true, autoRowHeight:false, striped:true, singleSelect:true, collapsible:false, //checkOnSelect:true, //selectOnCheck:true, remoteSort:false, frozenColumns:[[ {field:'ck',checkbox:true}, //{title:'cel02',field:'code',width:80,sortable:true} ]], columns:[[ {field:'cel01',title:'列名01',width:100,sortable:true}, {field:'cel02',title:'列名02',width:100,sortable:true}, {field:'cel03',title:'列名03',width:150,sortable:true}, {field:'cel04',title:'列名04',width:200,sortable:true}, {field:'cel05',title:'列名05',width:100,sortable:true}, {field:'cel06',title:'紧急度',width:100,sortable:true, formatter:function(value,row,index){ if("紧急" == $.trim(value)){ return '<span class="urgent01">' + value + '</span>'; }else{ return '<span class="normal01">' + value + '</span>'; } } }, {field:'cel07',title:'列名07',width:300,sortable:true}, {field:'cel08',title:'开始时间',width:200,sortable:true, formatter:function(value,row,index){ return formatterDate(value);} }, {field:'cel09',title:'结束时间',width:200,sortable:true, formatter:function(value,row,index){ return formatterDate(value);} }, {field:'cel10',title:'列名10',width:100,sortable:true} ]], pagination:true, pageNumber:1, pageList:[10,20,30,40,50], view:detailview, detailFormatter:function(index,row){ var conStyle = ' style="border:0px solid red; padding:10px 10px; background-color:#a4bac1;"'; var dataCon = '<div id="ddv-' + index + '"' + conStyle + '></div>'; return dataCon; }, onExpandRow:function(index,row){ //展开事件 $('#ddv-' + index).panel({ cache:false, border:false, href:'detailPage.htm', //展开行的子页面,如果是完整页面也仅取body元素之内的内容 onLoad:function(){ //调整展开行高度 $('#dataListTable').datagrid('fixDetailRowHeight',index); } }); }, onSelect:function(index,data){ //do nothing }, rowStyler:function(index,row){ /* if( index < 4 && (index % 2) == 0){ return 'background:#CCFF99'; } */ }, onClickRow:function(index,row){ //单击行事件 //---------for TEST 结合SHIFT,CTRL,ALT键实现单选或多选------------ if(index != selectIndexs.firstSelectRowIndex && !inputFlags.isShiftDown ){ selectIndexs.firstSelectRowIndex = index; //alert('firstSelectRowIndex, sfhit = ' + index); } if(inputFlags.isShiftDown ) { $('#dataListTable').datagrid('clearSelections'); selectIndexs.lastSelectRowIndex = index; var tempIndex = 0; if(selectIndexs.firstSelectRowIndex > selectIndexs.lastSelectRowIndex ){ tempIndex = selectIndexs.firstSelectRowIndex; selectIndexs.firstSelectRowIndex = selectIndexs.lastSelectRowIndex; selectIndexs.lastSelectRowIndex = tempIndex; } for(var i = selectIndexs.firstSelectRowIndex ; i <= selectIndexs.lastSelectRowIndex ; i++){ $('#dataListTable').datagrid('selectRow', i); } } //---------for TEST 结合SHIFT,CTRL,ALT键实现单选或多选------------ }, onLoadSuccess:function(data){ $('#dataListTable').datagrid('clearSelections'); }, onLoadError:function(){ //alert('error....'); } }); //other variables or event initialize here //------------------------------------------- var p = $('#dataListTable').datagrid('getPager'); //个性化设置分页对象 $(p).pagination({ pageNumber:1, pageSize:10, pageList:[10,20,30,40], beforePageText:'第', afterPageText:' 页，共{pages}页', displayMsg:'当前{from} - {to}条, 共{total}条' }); //------------------------------------------- }); function formatterDate(objDate){ //格式化日期函数 var strDate = objDate.year; strDate += '-' + objDate.month; strDate += '-' + objDate.date; strDate += ' ' + objDate.hours; strDate += ':' + objDate.minutes; strDate += ':' + objDate.seconds; return strDate; }
结果是：
（1），单选，直接单击某行即可单选某条记录；
（2），多选，按住键盘CTRL 或 SHIFT 键开可进行多选，
（A）按CTRL键不放，在easyui的datagrid上单击某行，即可选中单击的行，再次单击取消选中；
（B）在easyui的datagrid上单击某行，按SHIFT键不放，再单击另一行，则首尾两行之间记录全部选中；
