今天项目里又应用到了jqgrid这个插件，实现应用shitf键多选值。
jqgrid功能的强大是有目共睹，但是当我使用api中的
multiselect: true, multikey:'shiftKey'
时并没有如我所想象的那样实现多选功能，而只是单纯的点击项的多选。
于是在网上查找一番，终于找到牛人实现的一个简单方法（但是代码复杂），不需要改动源代码等，只需要添加beforeSelectRow的方法，代码如下：
beforeSelectRow:function multiSelectHandler(sid, e) {
var grid = $(e.target).closest("table.ui-jqgrid-btable");
var ts = grid[0], td = e.target;
var scb = $(td).hasClass("cbox");
if ((td.tagName == 'INPUT' && !scb) || td.tagName == 'A') {
return true;
}
var sel = grid.getGridParam('selarrrow');
var selected = $.inArray(sid, sel) >= 0;
if (e.ctrlKey || (scb && (selected || !e.shiftKey))) {
grid.setSelection(sid,true);
} else {
if (e.shiftKey) {
var six = grid.getInd(sid);
var min = six, max = six;
$.each(sel, function() {
var ix = grid.getInd(this);
if (ix < min) min = ix;
if (ix > max) max = ix;
});
while (min <= max) {
var row = ts.rows[min++];
var rid = row.id;
if (rid != sid && $.inArray(rid, sel)<0) {
grid.setSelection(row.id, false);
}
}
} else if (!selected) {
grid.resetSelection();
}
if (!selected) {
grid.setSelection(sid,true);
} else {
var osr = grid.getGridParam('onSelectRow');
if ($.isFunction(osr)) {
osr(sid, true);
}
}
}
}
说实话，限于本人功力不够，只能照搬牛人的代码了，结果确实实现了我所想要做到的功能。先点选第2行，再按住shift键，点选第6行，则选中了从第2行到第6行的所有行。
以下是完整的测试代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>jqgrid test</title>
<link href='css/jquery-ui-1.8.21.custom.css' rel='stylesheet'>
<!-- jqGrid -->
<link rel="stylesheet" type="text/css" media="screen"
href="jqueryGrid/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="jqueryGrid/src/css/ui.multiselect.css" />
</head>
<body>
<table id="entrysTable"></table>
<!-- jQuery -->
<script src="js/jquery-1.7.2.min.js"></script>
<!-- jQuery UI -->
<script src="js/jquery-ui-1.8.21.custom.min.js"></script>
<!-- jqGrid js -->
<script src="jqueryGrid/src/i18n/grid.locale-cn.js"
type="text/javascript"></script>
<script src="jqueryGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery("#entrysTable").jqGrid({
datatype : "local",
height : 200,
colNames : [ '序号', '词条', '用户', '状态' ],
colModel : [ {
name : 'id',
index : 'id',
width : 60,
sorttype : "int"
}, {
name : 'word',
index : 'word',
width : 90
}, {
name : 'checkUser',
index : 'checkUser',
width : 90
}, {
name : 'status',
index : 'status',
width : 90
} ],
multiselect : true,
multikey : 'shiftKey',
caption : "Manipulating Array Data",
beforeSelectRow : function multiSelectHandler(sid, e) {
var grid = $(e.target).closest("table.ui-jqgrid-btable");
var ts = grid[0], td = e.target;
var scb = $(td).hasClass("cbox");
if ((td.tagName == 'INPUT' && !scb) || td.tagName == 'A') {
return true;
}
var sel = grid.getGridParam('selarrrow');
var selected = $.inArray(sid, sel) >= 0;
if (e.ctrlKey || (scb && (selected || !e.shiftKey))) {
grid.setSelection(sid, true);
} else {
if (e.shiftKey) {
var six = grid.getInd(sid);
var min = six, max = six;
$.each(sel, function() {
var ix = grid.getInd(this);
if (ix < min)
min = ix;
if (ix > max)
max = ix;
});
while (min <= max) {
var row = ts.rows[min++];
var rid = row.id;
if (rid != sid && $.inArray(rid, sel) < 0) {
grid.setSelection(row.id, false);
}
}
} else if (!selected) {
grid.resetSelection();
}
if (!selected) {
grid.setSelection(sid, true);
} else {
var osr = grid.getGridParam('onSelectRow');
if ($.isFunction(osr)) {
osr(sid, true);
}
}
}
}
});
var mydata = [ {
id : "1",
word : "bick",
checkUser : "S",
status : "stop"
}, {
id : "2",
word : "bike",
checkUser : "C",
status : "start"
}, {
id : "3",
word : "bird",
checkUser : "B",
status : "running"
}, {
id : "4",
word : "cake",
checkUser : "D",
status : "stop"
}, {
id : "5",
word : "cat",
checkUser : "O",
status : "stop"
}, {
id : "6",
word : "catch",
checkUser : "P",
status : "start"
}, {
id : "7",
word : "desk",
checkUser : "W",
status : "running"
}, {
id : "8",
word : "dict",
checkUser : "B",
status : "running"
}, {
id : "9",
word : "task",
checkUser : "A",
status : "start"
}, {
id : "10",
word : "tick",
checkUser : "F",
status : "running"
}, {
id : "11",
word : "user",
checkUser : "H",
status : "stop"
} ];
for ( var i = 0; i <= mydata.length; i++)
jQuery("#entrysTable").jqGrid('addRowData', i + 1, mydata[i]);
</script>
</body>
</html>
如果有需要，可以试试哦！