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>

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

jqgrid 动态设置单元格不可编辑
单元格可编辑需要设置3个地方 1.tableGrid里面的参数 cellEdit:true(开启行编辑功能) false(默认,不可编辑) 2.cellsubmit: 'clientArray' 设 ...
layui table行点击tr_LayUI数据表格行单击事件中选中
2019年9月5日11:19:17 实现思路直接修改复选框选中状态和伪复选框(DIV)Class 但是调用checkStatus获取不到选中的行查看底层源代码checkStatus方法的实现是缓存 ...
android动态设置错误页面,Android中替换WebView加载网页失败时的页面
我们用webView去请求一个网页链接的时候,如果请求网页失败或无网络的情况下,它会返回给我们这样一个页面,如下图所示: 上面这个页面就是系统自带的页面,你觉得是不是很丑?反正小编本人觉得非常丑,很难 ...
Vue项目如何动态设置路由meta信息中的title属性值
场景:编辑.新建页面配置为同一个路由信息,期望不同页面的文档title展示不一样. 目前的配置如下,不能实现需求. 因此,我们需要动态的去设置meta的值.思路:借助Vue Router的路由独享守卫 ...
android 动态设置margin,android 代码中设置margin
场景:Android怎么在java代码中设置margin Android如何在java代码中设置margin 原创帖,转发请注明出处:http://thierry-xing.iteye.com/blo ...
Android RadioGroup动态加入RadioButton，动态设置选中和未选中的颜色及设置默认选中
此篇文章主要实现功能:RadioGroup控件根据服务端返回的数据动态添加RadioButton 关于RadioButton动态设置背景颜色和字体颜色,踩过好多坑,接下来我总结一下遇到的所有问题及解决 ...
SSRS 动态设置分组依据及行组个数
动态设置行组及行组级数业务场景: A公司想在同一张BI报告中通过切换参数,分别从不同角度分析统计产品销售情况, 同时又想同时从两个角度或三个角度统计分析. 本场景主要涉及两个技能点: 1) 动态设 ...
antd行点击选中/取消选中
项目使用的是ant-design-vue@2.x,最近测试提了一个优化建议:行点击选中当前记录.接下来记录一下实现: 行点击事件的要点就是自定义行属性(customRow),我们可以两步搞定这个需求( ...
js学习笔记（获取选中内容、缓动动画、动态设置元素属性）
获取选中内容 1.标准浏览器 window.getSelection()拿到的是对象 window.getSelection().toString()拿到的是选中的文字 2.ie获取选中文字 docu ...

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

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

最新文章

热门文章