今天项目里又应用到了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>
如果有需要，可以试试哦！
相关推荐
"jqgrid_位于上端的合计行" 指的是在 jqGrid 表格的顶部显示总计行，用于快速汇总列表中的数值数据。 要实现这个功能，我们需要了解 jqGrid 的几个关键配置选项和方法。首先，我们需要启用 `footerrow` 选项，这将...
jqgrid合并行、合并列 先看示例图片最终效果： jqgrid合并单元格 .jqgrid { width: 80%; margin: 0 auto; } /* 这个代码是解决表头有一点点错位的问题 */ .ui-state-default, .ui-widget-content .ui-state...
下面可以获取选择一行的id，如果你选择多行，那下面的id是最后选择的行的id： var id=$(‘#gridTable').jqGrid(‘getGridParam','selrow'); 如果想要获取选择多行的id，那这些id便封装成一个id数组，那可以使用以下...
jqGrid提供了丰富的功能，包括排序、筛选、分页以及行编辑等。在本例中，我们将深入探讨如何实现"jqgrid行编辑+动态为其他列赋值"这一功能。 首先，我们需要理解jqGrid的行编辑功能。jqGrid允许用户在表格的每一行...
在网页开发中，表格（Table）是展示数据的重要方式，而jqGrid是一个强大的JavaScript库，专门用于创建交互式、功能丰富的表格。本教程将深入探讨如何利用jqGrid来实现美观且功能丰富的表格样式。 首先，我们需要...
总之，jqGrid作为一款优秀的jQuery插件，为Web开发人员提供了高效的数据管理解决方案。熟练掌握jqGrid，不仅可以提升项目开发效率，还能为用户提供友好的数据操作界面。因此，对于从事Web前端开发的工程师来说，学习...
2. 动态加载：JqGrid具备分页功能，能够根据用户的滚动或点击事件动态加载数据，减轻服务器负担并提升用户体验。 3. 排序与筛选：用户可以通过点击表头进行列排序，同时JqGrid还提供了高级的筛选功能，如条件筛选、...
jqGrid_JS_4.7.1 是一个基于JavaScript的...总之，jqGrid_JS_4.7.1是一个强大且灵活的数据网格解决方案，适用于需要处理大量数据和复杂交互的Web应用。开发者可以通过其丰富的功能和API，快速构建功能完善的表格应用。
总的来说，jqGrid 3.6 是一个功能丰富的数据网格解决方案，通过掌握以上知识点，开发者可以构建出高效、灵活的数据展示和管理界面。不过，需要注意的是，随着技术的发展，jqGrid 后续已被更新的版本如 Free jqGrid ...
7. **行选择**：支持单选和多选，以及行的展开和折叠，适用于树形结构的数据。 8. **行操作**：提供行的拖放、复制、剪切和粘贴功能，增强用户体验。 9. **预览和打印**：内置了表格预览和打印功能，无需额外的库...
在开发过程中遇到一个需求，根据供应商合并证照到期提醒天数，感觉还不错，所以就分享给大家
本压缩包“jqgrid合并单元格.rar”提供了一个解决方案，用于在jqGrid中实现单元格的合并，包括行合并和列合并，使得数据展示更为清晰、有组织。 首先，jqGrid的单元格合并功能主要通过设置表格的colModel属性和grid...
总的来说，jqGrid5.5版本是一个功能全面且高度可定制的数据网格解决方案，适合开发复杂的Web应用程序，特别是在处理大量数据和需要复杂用户交互的场景中。学习jqGrid5.5不仅可以提高数据展示和管理的效率，还能提升...
jqGrid是一款功能强大的JavaScript表格插件，用于在Web页面中展示和操作数据。它支持多种功能，包括排序、分页、搜索以及我们关注的...对于那些对前端数据展示有较高要求的项目，jqGrid无疑是一个值得考虑的解决方案。
### jqGrid官方文档知识点概述 #### 一、简介与背景 **jqGrid** 是一个基于 jQuery 的客户端表格组件，能够高效地展示和处理表格数据。它支持通过 Ajax 动态加载数据，这意味着它可以与多种服务器端技术（如 PHP、...
在这个场景中，我们将详细探讨如何使用jqGrid来实现ajax后端代码交付、分页、多选以及在切换分页时保持选中的状态。 首先，要实现ajax后端代码交付，我们需要在jqGrid中配置服务器交互。jqGrid支持使用AJAX进行数据...
6. **主题与样式**：jqGrid提供多种预设主题，如“ui.jqgrid.css”中的“ui-blue”和“ui-gray”。你可以根据项目需求选择合适的主题，或者自定义样式以满足特定设计需求。 7. **扩展功能**：jqGrid还支持列拖放、...
jqGrid 是一个基于 jQuery 的数据网格插件，用于在网页上展示和操作表格化的数据。在开始使用 jqGrid 之前，需要具备基本的 JavaScript 和 jQuery 知识，因为 jqGrid 是构建在 jQuery 库之上的。jQuery 提供了简便的...
jqGrid是基于jQuery库的表格插件，它提供了一套完整的解决方案，包括数据的加载、排序、筛选、分页、编辑以及格式化等。jqGrid支持多种数据源，如JSON、XML、HTML、CSV等，能够无缝集成到各种Web项目中。其核心功能...
- **行选择**：提供单选和多选模式，可以获取选中行的数据。 - **工具栏**：可以自定义工具栏，添加按钮或其他UI元素。 ### 5. 样式定制 `ui.jqgrid.css`文件提供了默认的样式，你可以根据需求调整或覆盖这些样式...