jqGrid 动态设置行选中、取消中选中 setSelection使用注意事项

jqGrid可以使用setSelection方法动态设置某行选中或不选中,jqGrid用户手册给出的语法如下:

setSelection(string rowid, [boolean onselectrow])
Toggles a selection of the row with id = rowid; If selected the selrow grid parameter is set to the rowid - in multiselect mode to selarrrow array is added the rowid. The revers if the row is deselected.

参数说明:

  • string rowid - the id of the row
  • boolean onselectrow - if onselectrow is true (default) then the event onSelectRow and/or triggered event jqGridSelectRow are launched, otherwise not. 选中或取消选中时是否触发jqGridSelectRow事件,true会触发,false不会触发。

从jqGrid用户手册可以看出,setSelection其实是一个toggle函数,当设置行选中时,则取消选中,当该行没有选中时则选中该行,类似jquery的toggleClass,这个用法就有点坑了。通常我们希望的是:

  • 设置选中:该行原来没选中则选中,该行原来已经选中则继续选中;
  • 取消选中:该行原来没选中则继续保持没选中状态,该行原来选中则取消选中;

为此,我们希望设置行是否选中的函数看起来应该如下:

// rowid, 表格rowId
// selected, 选中还是不选中,true表示选中
// triggerFlag, 是否触发jqGridSelectRow事件
function setSelectionNew(rowid, selected, triggerFlag) {
	if (selected) {	// 设置选中
		if (rowid 行没选中) setSelection(rowid, triggerFlag);
	} else {		// 设置不选中
		if (rowid 行已选中) setSelection(rowid, triggerFlag);
	}
}

具体看下述DEMO:

<!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-body"> <!-- page-body -->
		<div class="panel panel-default" id="panel-orders">
			<div class="panel-heading">
				<button type="button" class="btn btn-primary" onclick="doSelect()">设置第3行选中</button>
				<button type="button" class="btn btn-primary" onclick="cancelSelect()">取消第3行选中</button>
			</div>
			<table id="orders" class="table-bordered"></table>
		</div>
	</div>
</div>
   
<script type="text/javascript">
	var data = [], rowIds = [];
	function getBills() {
		var rowCount = 10;
		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 doSelect() {
		var rowId = "3";
		if (! $("#jqg_orders_" + rowId).prop("checked")) {
			$("#orders").jqGrid("setSelection", rowId, false);
		}
	}
	
	function cancelSelect() {
		var rowId = "3";
		if ($("#jqg_orders_" + rowId).prop("checked")) {
			$("#orders").jqGrid("setSelection", rowId, false);
		}
	}

	/** jqgrid 扩展 start.**/
	$(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: "total_count", width: 70, sorttype: "number"},
				{label: "需求数量", name: "goods_count", width: 70,},
				{label: "出库数量", name: "out_count", width: 70, sorttype: "number"},
			],
			datatype: 'local',
			rownumbers: true,
			height: 300,
			rowNum: 1000,
			multiselect: true,
		});
		getBills();
	});
</script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值