EasyUI入门2 datagrid复选框全选效果（通过约束条件实现部分项参与的全选效果）

需求

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) 执行两次。