jqGrid 获取选中行注意事项及封装直接返回行数据而不是rowId

最新推荐文章于 2023-12-05 21:45:26 发布

老马历写记

最新推荐文章于 2023-12-05 21:45:26 发布

阅读量1k

点赞数

分类专栏： WEB-Front 文章标签： jqGrid getGridParam selrow selarrrow multiselect multiboxonly

本文链接：https://blog.csdn.net/chuangxin/article/details/87476333

版权

WEB-Front 专栏收录该内容

87 篇文章 3 订阅

订阅专栏

jqGrid单选、多选实现，多选模式下点击行复选框自动勾上如何处理

实现多选，只要jgGrid构建时带上参数multiselect: true即可，具体参考下文的DEMO
多选模式下，默认点击行，即可选中行并且复选框自动勾上，再次点击取消选中，复选框取消选中；如果设置multiboxonly: true，则只有选中复选框才会选中行。如果设置表格的cellEdit: true，即使表格可编辑，则只能通过点击复选框来实现选中、取消选中行。

jqGrid获取选中行，提供了2个方法：

单选模式，获取选中行，jqGrid(‘getGridParam’, ‘selrow’)，返回选中行rowId
多选模式，获取选中行，jqGrid(‘getGridParam’, ‘selarrrow’)，返回选中行rowId数组

jqGrid提供的获取选中行方法，有2个缺陷：

多选模式及单选模式，需要不同参数调用，尤其：selrow、selarrrow对我这种记忆力不是很好的码农简直就是噩梦；
返回的都是rowId，要获取行数据的话，还需要调用jgGrid(‘getRowData’,rowId)

jqGrid方法扩展：getSelectedRow，getSelectedRows直接返回数据：
DEMO说明：
1）只要将DEMO代码另存为html文件，用浏览器打开就行；
2）DEMO涉及jqGrid下述几个知识点：

jqGrid初始化
jqGrid获取表格参数函数调用,getGridParam, 实现选中行rowId获取
jqGrid方法扩展

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>jggrid 获取选中行</title>
	
	<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="https://cdn.bootcss.com/jqgrid/4.6.0/css/ui.jqgrid.css" />
	<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
	<style>
		tr.ui-state-highlight td, tr.selected-row td{background: #dff0d8;}
	</style>
</head>
<body>
<div class="page-content container">
	<div class="page-head" style="padding: 15px 0"> <!-- page-head -->
		<button type="button" class="btn btn-sm" onclick="getselrow()">自带单选行</button>
		<button type="button" class="btn btn-sm" onclick="getselrowarr()">自带多选行</button>
		<button type="button" class="btn btn-sm" onclick="getSelectedRow()">封装单选行</button>
		<button type="button" class="btn btn-sm" onclick="getSelectedRows()">封装多选行</button>
	</div><!-- page-head -->
	<div class="page-body"> <!-- page-body -->
		<div class="panel panel-default" id="panel-orders">
			<table id="orders" class="table-bordered"></table>
		</div>
	</div>
</div>
   
<script type="text/javascript">
	var data = [], rowIds = [];
	function getBills() {
		var rowCount = 50;
		for (var i = 0; i < rowCount; i ++) {
			data.push({
				sid: i,
				bill_id: i,
				bill_detail: i,
				goods_id: i,
				unit_id: i,
				package_id: i,
				ref_detail: i,
				goods_no: i + 1,
				goods_name: '零件名称' + rowCount + i,
				car_type_name: '车型' + rowCount + i,
				package_name: '包装器具' + rowCount + i,
				unit: i%2==0 ? '件' : '箱',
				snp: 0.89,
				box_count: rowCount + i,
				total_count: rowCount + i,
				goods_count: rowCount + i,
				out_count: rowCount + i,
				bill_no: 'BN0000000' + i,
			})
		}
		$("#orders").jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
	}
	function getselrow() {
		console.log("单选: ", $("#orders").jqGrid("getGridParam", "selrow"));
	}
	function getselrowarr() {
		console.log("多选: ", $("#orders").jqGrid("getGridParam", "selarrrow"));
	}
	function getSelectedRow() {
		console.log("单选，获取单行: ", $("#orders").jqGrid("getSelectedRow"));
	}
	function getSelectedRows() {
		console.log("多选: 获取多行", $("#orders").jqGrid("getSelectedRows"));
	}

	/** jqgrid 扩展 start．**/
	(function($){
		$.jgrid && $.jgrid.extend({
			getSelectedRow: function() {
				var rowId = this.jqGrid('getGridParam', 'selrow');
				var rowData = rowId ? this.jqGrid('getRowData', rowId) : null;
				if(rowData) rowData.rowId = rowId;
				return rowData;
			},
			getSelectedRows: function() {
				var rows = [], rowIds = this.jqGrid('getGridParam', 'selarrrow') || [];
				for(var i = 0, l=rowIds.length; i<l; i++) {
					var rowData = this.jqGrid('getRowData', rowIds[i]);
					rowData.rowId = rowIds[i];
					rows.push(rowData);
				}
				return rows;
			}
		});
	})(jQuery);	
	
	$(function() {
		$("#orders").jqGrid({
			colModel: [
				{label: "零件号", name: "goods_no", width: 60},
				{label: "零件名称", name: "goods_name", width: 180},
				{label: "车型", name: "car_type_name", width: 70},
				{label: "包装器具", name: "package_name", width: 70},
				{label: "单位", name: "unit", width: 60 },
				{label: "装箱率", name: "snp", width: 50, sorttype: "number"},
				{label: "箱数", name: "box_count", width: 40, sorttype: "number"},
				{label: "需求总数", name: "total_count", width: 70, sorttype: "number"},
				{label: "需求数量", name: "goods_count", width: 70,},
				{label: "出库数量", name: "out_count", width: 70, sorttype: "number"},
				{label: "订单号", name: "bill_no", width: 120},
			],
			datatype: 'local',
			rownumbers: true,
			height: 300,
			rowNum: 1000,
			// cellEdit: true,
			multiselect: true,
			// cellsubmit: 'clientArray'
		});
		getBills();
	});
</script>
</body>
</html>