jqGrid multiselect多选模式下 multiboxonly设置为true 点击行原选中行会被重置问题处理
在之前的博文 “jqGrid 获取选中行注意事项及封装 直接返回行数据而不是rowId”，曾提到过jqGrid在多选模式下，默认点击行即可选中、取消该行，如果表格构造的时候设置multiboxonly为true，则只有点击复选框才会选中、取消行。事实上，并非如此，multiboxonly选项与我们预想的表现结果不太一致。
1、只设置multiboxonly=true
如上图，之前已经选中了1、2、3、4条记录，此时鼠标点击第一行“零件名称”列，只选中第1行，2、3、4被取消选中啦，也就是说鼠标单击行的时候，之前的选中行被重置了。
这个显然不是我们想要的结果，我们想要的结果应该只是点击复选框才会选中、取消行。想要实现它，jqGrid还需要一个额外设置：multikey。
2、设置multiboxonly=true, multikey=‘shiftKey’
点击复选框可以选中、取消选中行，按住shift键+鼠标点击行也可以选中、取消选中行，具体看下面DEMO。
3、DEMO
<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>
head>
<body>
<div class="page-content container">
<div class="page-head" style="padding: 15px 0">
<button type="button" class="btn btn-sm btn-azure" onclick="setGridParam('')">multikey=falsebutton>
<button type="button" class="btn btn-sm btn-azure" onclick="setGridParam('shiftKey')">multikey='shiftKey'button>
<button type="button" class="btn btn-sm btn-azure" onclick="getSelectedRows()">获取选中行button>
div>
<div class="page-body">
<div class="panel panel-default" id="panel-orders">
<table id="orders">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_name: '单位',
snp: 0.89,
box_count: rowCount + i,
total_count: rowCount + i,
goods_count: rowCount + i,
out_count: rowCount + i,
bill_no: 'BN0000000' + i,
qrcode: '1000000000' + i,
barcode: '1000000000' + i,
flag: i >= rowCount - 1 ? 1 : 0,
})
}
$("#orders").jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
}
function setGridParam(multikey) {
$("#orders").jqGrid("setGridParam", {multikey: multikey || false });
$("#orders").trigger('reloadGrid');
}
function getSelectedRows() {
var rowIds = $("#orders").jqGrid("getGridParam", "selarrrow");
console.log('getSelectedRows-rowids: ', rowIds);
}
$(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_name", width: 40},
{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},
{label: "二维码", name: "qrcode", width: 130},
{label: "条码", name: "barcode", width: 120}
],
datatype: 'local',
rownumbers: true,
multiselect: true,
multiboxonly: true,
// multikey: "shiftKey",
height: 300,
rowNum: 1000
});
getBills();
});
script>
body>
html>
DEMO说明：
1）按钮multikey=false，设置表格multikey无效
2）按钮multikey=‘shiftKey’，设置表格multikey为shift键，此时单击表格行不会影响已选中行，除非按住shift键再点击行。
4、multiboxonly、multikey参数官方文档说明
| Property | Type | Description | Default | Can be Changed? |
|---|---|---|---|---|
| multiboxonly | boolean | This option works only when the multiselect option is set to true (see below). When multiselect is set to true, clicking anywhere on a row selects that row; when multiboxonly is also set to true, the multiselection is done only when the checkbox is clicked. Clicking in any other row (suppose the checkbox is not clicked) deselects all rows and selects the current row. | false | Yes |
| multikey | string | This parameter makes sense only when the multiselect option (see below) is set to true. Defines the key which should be pressed when we make multiselection. The possible values are: shiftKey - the user should press Shift Key, altKey - the user should press Alt Key, and ctrlKey - the user should press Ctrl Key. | empty | Yes |