需求
datagrid如果有一些项因为约束条件(比如这一项需要显示出来,但是复选框是disable的),那么在点击全选或全否复选框的时候,这些状态是disable的行是不应该被选中的。
无废话直接上代码
<table id="dgMRList" class="easyui-datagrid" style="width:100%;height:auto" data-options="rownumbers: true,
singleSelect: false,
checkOnSelect:true,
method: 'get',
onClickRow : onClickMRRow,
onDblClickRow : onDblClickMRRow,
onCheckAll : onCheckAllMR,
onUncheckAll : onUncheckAllMR">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"><input type="checkbox" id="ckAll" name="DataGridCheckbox" /></th>
<th data-options="field:'RSGUID'" hidden="hidden">RSGUID</th>
<th data-options="field:'项目ID'" hidden="hidden">项目ID</th>
<th data-options="field:'KSGUID'" hidden="hidden">KSGUID</th>
<th data-options="field:'请购单号'">请购单号</th>
<th data-options="field:'请购单名称'">请购单名称</th>
<th data-options="field:'请购单状态代码'" hidden="hidden">请购单状态代码</th>
<th data-options="field:'请购单状态描述'">请购单状态描述</th>
<th data-options="field:'询价状态'">询价状态</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function onClickMRRow(rowIndex, rowData) {
//根据询价状态值 单击单选行不可用
if (rowData.询价状态 == "已询价") {
$('#dgMRList').datagrid('unselectRow', rowIndex);
}
}
function onDblClickMRRow(rowIndex, rowData) {
//根据询价状态值 双击单选行不可用
if (rowData.询价状态 == "已询价") {
$('#dgMRList').datagrid('unselectRow', rowIndex);
}
}
//我草这么个破效果还得自己手工写 2017.6.23
function onCheckAllMR(rows) {
$("input[name='DataGridCheckbox']").each(function (index, el) {
if (el.checked == true) {
el.checked = false;
$.each(rows, function (i, n) {
$("#dgMRList").datagrid('uncheckRow', i); //此处参考其他人的代码,原代码为unselectRow
});
}
else {
el.checked = true;
$.each(rows, function (i, n) {
if (n.询价状态 == "已询价") {
$("#dgMRList").datagrid('uncheckRow', i);
}
else {
$("#dgMRList").datagrid('checkRow', i);
}
});
}
});
}
function onUncheckAllMR(rows) {
$("input[name='DataGridCheckbox']").each(function (index, el) {
if (el.checked == true) {
el.checked = false;
$.each(rows, function (i, n) {
$("#dgMRList").datagrid('uncheckRow', i);
});
}
});
}
</script>
说明
1.以下四个方法都是必须的,不然效果不能完整实现
function onClickMRRow(rowIndex, rowData)
function onDblClickMRRow(rowIndex, rowData)
function onCheckAllMR(rows)
function onUncheckAllMR(rows)
2.解释一下为什么onCheckAllMR需要下面这段if
if (el.checked == true) {
el.checked = false;
$.each(rows, function (i, n) {
$("#dgMRList").datagrid('uncheckRow', i); //此处参考其他人的代码,原代码为unselectRow
});
}
因为如果没有这个if的话在选项无disable的时候无bug,但是当有选项为disable的时候,就会出现“取消勾选的时候点第一下全部取消,点第二下的时候没有全部选中,要点第三下才会全部选中”的bug。
3.为什么反选不用$(“#dgMRList”).datagrid(‘uncheckAll’),而要用each遍历一行行地取消
因为uncheckAll方法会触发function onUncheckAllMR(rows) 函数,导致function onUncheckAllMR(rows) 执行两次。