//------------------------------------------------------------------------------- // 當然頁面文件中還需要引入的文件如下： // 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鍵不放，再單擊另一行，則首尾兩行之間記錄全部選中；