admin管理员组文章数量:1640593
jqGrid在多选模式下(表格构造时设置multiselect = true),选中、取消选中行有2种操作方式:
1)点击表格行,选中、取消选中行记录;
2)点击表头的全选复选框,选中、取消选中所有表格行;
因此要禁止行选中需要处理上述两种情况。
1、beforeSelectRow实现某行不可选中
beforeSelectRow: function(rowId, event) {
return rowId == 5 ? false : true;
}
返回true可选中,false则不可选中,rowId = 5不可选中
适合点击表格行,对于表头全选复选框无效。
2、设置表格行tr class = ‘… ui-state-disabled’
将表格行tr的class添加ui-state-disabled,点击表头全选复选框,该行不会选中,但是单独点击该行无效,仍然可以选中。
if(!$(this).hasClass("ui-subgrid") && !$(this).hasClass("jqgroup") && !$(this).hasClass(disabled)
通过jqGrid源码可以发现,当tr包含disabled,没有特别设置的话disabled = ui-state-disabled,该行不会被选中。
3、最终解决方案
1)beforeSelectRow 将该行设置为不可选中,解决点击行选中、取消选中问题;
2)数据加载完后,将tr的class添加ui-state-disabled,解决复选框全选时表格行选中问题;
4、本文DEMO
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jgGrid-禁止行选中</title>
<link rel="stylesheet" href="https://cdn.bootcss/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.bootcss/jqueryui/1.11.0/jquery-ui.min.css" />
<script src="https://cdn.bootcss/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss/jqgrid/4.6.0/css/ui.jqgrid.css" />
<script src="https://cdn.bootcss/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
</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">
<h3 class="panel-title">jgGrid-禁止行选中<button type="button" class='btn btn-sm btn-default' onclick='getSelectedRows()'>获取选中行数</button></h3>
</div>
<table id="orders"></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,
goods_id: 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,
barcode: '1000000000' + i,
flag: i >= rowCount - 1 ? 1 : 0,
})
}
$("#orders").jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');
// rowId = 5 设置class ui-state-disabled
$("#5").addClass('ui-state-disabled');
}
function getSelectedRows() {
alert($("#orders").jqGrid('getGridParam', 'selarrrow').length);
}
$(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: "barcode", width: 120}
],
datatype: 'local',
rownumbers: true,
multiselect: true,
height: 300,
beforeSelectRow: function(rowId, event) {
// if(!$(this).hasClass("ui-subgrid") && !$(this).hasClass("jqgroup") && !$(this).hasClass(disabled)
return rowId == 5 ? false : true;
},
});
getBills();
});
</script>
</body>
</html>
本文标签: 事件动态beforeSelectRowjqGriddisabled
版权声明:本文标题:jqGrid 基于beforeSelectRow事件和ui-state-disabled 禁止行选中和动态设置某行不可选中 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729319848a1195748.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论