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

<!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>
</head>
<body>
<div class="page-content container"><div class="page-head" style="padding: 15px 0"> <!-- page-head --><button type="button" class="btn btn-sm btn-azure" onclick="setGridParam('')">multikey=false</button><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><!-- page-head --><div class="page-body"> <!-- 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

jqGrid multiselect多选模式下 multiboxonly设置为true 点击行原选中行会被重置问题处理相关推荐

解决ftp的pasv模式下iptables设置问题
关于ftp的两个模式我就不再缀述,这里主要说下pasv模式下,iptables的设置大家都知道,pasv模式下,控制端口是21,而数据传输端口再是大于1024的随机端口,这样iptables要想全部 ...
Linux字符模式下如何设置/删除环境变量
Linux字符模式下设置/删除环境变量方法: bash下设置:export 变量名=变量值删除:unset 变量名 csh下设置:setenv 变量名变量值删除:unsetenv 变量名 h ...
Centos在NAT模式下的设置
一.使用NAT连接创建虚拟机之后,我们要设置一下虚拟机网卡的工作模式. 最推荐的是桥接模式,这种模式下,虚拟主机的网卡有独立的IP地址,跟本地局域网里面的真实主机差不多.但是缺点也很明显,就是不能用 ...
Angular NgReflectProperty的设置位置 - 只有在调试模式下才设置该属性
这四根border是的outline,只有当屏幕不够宽时才能完全显现: 当屏幕足够宽时,a的outline轮廓线只有最左边visible了: 仅当移除width: 100%和min-height: 7 ...
Windos下用setx.exe命令行模式下永久设置系统环境变量
From: http://www.cnblogs.com/soli/archive/2007/08/30/876283.html setx.exe不是系统默认自带的命令,但可以从微软的网站(2K,XP ...
NAT 模式下网关设置
@NATTOC 1.能够ping通内网,且网关在配置文件中的网关和DNS都设置是对的,但还是无法ping通外网. 原因是VMware的NAT网关最后一个是1, 如图: 有2种解决办法: 第一种:点开w ...
Windos下用setx.exe命令行模式下永久设置系统环境变量(转)
setx.exe不是系统默认自带的命令,但可以从微软的网站(2K ,XP )上下载到,是官方的咚咚,所以可以放心使用.这里是我从2K 里的安装文件中抽取出来的exe文件,不想安装又信得过我的话可以下 ...
vs2008网站模式下不能设置rdlc的数据源
很郁闷,vs2008中网站中rdlc报表竟然不能设置数据源,必须在工程下才能用. 转载于:https://www.cnblogs.com/shunliy/archive/2009/01/09/1373 ...
latex（构建在pdflatex模式下）设置times new roman新罗马字体
LaTeX遇到的一些问题(字体设置) 提示:以下是本篇文章正文内容,下面案例可供参考 1.添加宏包示例如下: \usepackage{fontspec} \setmainfont{Times New ...