今天项目里又应用到了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>
如果有需要，可以试试哦！
相关推荐
下面可以获取选择一行的id，如果你选择多行，那下面的id是最后选择的行的id： var id=$(‘#gridTable').jqGrid(‘getGridParam','selrow'); 如果想要获取选择多行的id，那这些id便封装成一个id数组，那可以使用以下...
jqgrid合并行、合并列 先看示例图片最终效果： jqgrid合并单元格 .jqgrid { width: 80%; margin: 0 auto; } /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state...
jqgrid_位于上端的合计行、汇总列表数据，并展示合计行与首行，适用于带数字的列表，简单适用，速度很快
jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid 学习 2 jQuery 学习之：jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 ...
jquery.jqGrid-4.6.0（jquery表格插件）.zip----------jqGrid4.6.0包，官网下载的，原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40，官网上面demo40下载...
在开发过程中遇到一个需求，根据供应商合并证照到期提醒天数，感觉还不错，所以就分享给大家
jqgrid
该方式是在jqgrid的列基础上进行编辑，为列添加保存事件，文本域和输入框采用blur失去焦点的方式进行保存，该方法含有点击为其他列赋值的功能。参考api列子并结合自己公司功能需求。
直接从官方网站上下载得到的demo压缩包 按照其readme介绍的办法 解压到web容器上并且尝试打开jqgrid html使之运行 结果并不能得到像http: www trirand com blog jqgrid jqgrid html一般的效果 我因为使用的是java...
jqgrid中文文档API，使用JQGRID
jquery.jqGrid-4.8.2（jquery表格插件）.zip----------jqGrid4.8.2包，官网下载的，原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
主要为大家详细介绍了jqGrid表格底部汇总、合计行footerrow处理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jqgrid jqgrid 增删查改 添加toolbar 不保存到数据库 artdialog 弹出框
JqGrid插件+JqGridDemo+JqGrid主题，自己项目里引入的文件
JqGrid中文API文档，包含了基础的JqGrid控件的属性方法事件等，有如何使用JqGrid的Demo.
jquery.jqgrid
它们在hibernate.cfg.xml文件第15,16行. <property name="connection.username">root <property name="connection.password">root struts配置文件和hibernate的配置文件都在src目录下 4.这就是jqGrid最简单的演示,...
jqGrid 中的锁定固定的列并且关于jqGrid 中的一些排序的实现细节
jqGrid demo