jqGrid多选模式下, 假设某列有个formatter,该formatter是行记录增、删、改操作按钮集合,那么我们会发现点击按钮后,该按钮所在的行就会被选中。该现象与我们熟知的操作习性不符合,因此我们要解决单元格上的按钮操作与行记录选中分离。实现方式比较简单,我们只要阻止按钮点击事件冒泡即可,关于事件默认行为和事件冒泡大家请参考其它博文。
看个DEMO,DEMO中所示“默认行为”操作按钮点击后,该行会被选中;“阻止冒泡”按钮点击后,由于点击事件做了阻止冒泡处理,不会向上冒泡到单元格、表格行…,所以该行不会被选中,具体HTML代码如下:
<!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">
<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 opr1(data, options, row) {
return "<button type='button' class='btn btn-xs btn-primary' οnclick='doOpr1()'>默认行为</button>";
}
function opr2(data, options, row) {
return "<button type='button' class='btn btn-xs btn-primary' οnclick='doOpr2(event)'>阻止冒泡</button>";
}
function doOpr1() {
alert('点击后,复选框会选中');
}
function doOpr2(event) {
event.stopPropagation();
// 获取行号, 行数据如下
// var rowId = $(event.target).closest('tr').attr('id'), row = $grid.jqGrid("getRowData", rowId);
alert('点击后,复选框不会被选中');
}
/** 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"},
{label: "操作-默认行为", name: "bill_no", width: 90, formatter: opr1},
{label: "操作-阻止冒泡", name: "bill_no", width: 90, formatter: opr2},
],
datatype: 'local',
rownumbers: true,
height: 300,
rowNum: 1000,
multiselect: true,
});
getBills();
});
</script>
</body>
</html>