jqgrid shiftKey 从第2行到第6行多选的解决方案

最新推荐文章于 2023-04-04 09:34:54 发布

iteye_20696

最新推荐文章于 2023-04-04 09:34:54 发布

阅读量541

点赞数

分类专栏： jquery 文章标签： javascript ui ViewUI

本文链接：https://blog.csdn.net/iteye_20696/article/details/82583340

版权

jquery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

今天项目里又应用到了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>

如果有需要，可以试试哦！

iteye_20696

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jqgrid shiftKey 从第2行到第6行多选的解决方案

今天项目里又应用到了jqgrid这个插件，实现应用shitf键多选值。 jqgrid功能的强大是有目共睹，但是当我使用api中的 multiselect: true,multikey:'shiftKey' 时并没有如我所想象的那样实现多选功能，而只是单纯的点击项的多选。于是在网上查找一番，终于找到牛人实现的一个简单方法（...
复制链接

扫一扫