|
//-------------------------------------------------------------------------------
// 當(dāng)然頁(yè)面文件中還需要引入的文件如下：
// easyui.css 和其它頁(yè)面用到的CSS文件
// jquery-1-8-3-min.js, easyui-lang-zh_CN.js, jquery-easyui-min.js, datagrid-detailview.js, 和其它頁(yè)面用到的JS文件
//-------------------------------------------------------------------------------
// 結(jié)合SHIFT,CTRL,ALT鍵實(shí)現(xiàn)單選或多選
//-------------------------------------------------------------------------------
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){//響應(yīng)鍵盤(pán)按下事件
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) { //響應(yīng)鍵盤(pán)按鍵放開(kāi)的事件
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代碼,在頁(yè)面增加加載數(shù)據(jù)的位置和在body中增加響應(yīng)鍵盤(pán)事件：
?<body class="body01" onkeydown="javascript:keyPress(event);" onkeyup="javascript:keyRelease(event);">
<!-- 數(shù)據(jù)加載存放位置 -->
<div>
<table id="dataListTable"></table>
</div>
?
?3，在datagrid請(qǐng)求代碼的onClickRow事件中增加操作代碼，onClickRow單擊事件如下：
onClickRow:function(index,row){
//-------------for TEST 結(jié)合SHIFT,CTRL,ALT鍵實(shí)現(xiàn)單選或多選----------------
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 結(jié)合SHIFT,CTRL,ALT鍵實(shí)現(xiàn)單選或多選----------------
}
?
?
?4，參考的datagrid請(qǐng)求代碼：
?
?;
$(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:'開(kāi)始時(shí)間',width:200,sortable:true,
formatter:function(value,row,index){ return formatterDate(value);}
},
{field:'cel09',title:'結(jié)束時(shí)間',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){ //展開(kāi)事件
$('#ddv-' + index).panel({
cache:false,
border:false,
href:'detailPage.htm', //展開(kāi)行的子頁(yè)面,如果是完整頁(yè)面也僅取body元素之內(nèi)的內(nèi)容
onLoad:function(){
//調(diào)整展開(kāi)行高度
$('#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 結(jié)合SHIFT,CTRL,ALT鍵實(shí)現(xiàn)單選或多選------------
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 結(jié)合SHIFT,CTRL,ALT鍵實(shí)現(xiàn)單選或多選------------
},
onLoadSuccess:function(data){
$('#dataListTable').datagrid('clearSelections');
},
onLoadError:function(){
//alert('error....');
}
});
//other variables or event initialize here
//-------------------------------------------
var p = $('#dataListTable').datagrid('getPager'); //個(gè)性化設(shè)置分頁(yè)對(duì)象
$(p).pagination({
pageNumber:1,
pageSize:10,
pageList:[10,20,30,40],
beforePageText:'第',
afterPageText:' 頁(yè)，共{pages}頁(yè)',
displayMsg:'當(dāng)前{from} - {to}條, 共{total}條'
});
?$('#dataListTable').datagrid('enableCellSelecting');
//-------------------------------------------
});
?
?
function formatterDate(objDate){ //格式化日期函數(shù)
var strDate = objDate.year;
strDate += '-' + objDate.month;
strDate += '-' + objDate.date;
strDate += ' ' + objDate.hours;
strDate += ':' + objDate.minutes;
strDate += ':' + objDate.seconds;
return strDate;
}
|
