easyui datagrid checkbox复选框取消单击选中事件、初始全选全不选等问题解决

系统业务需要，导入的列表数据默认全部选中，且不可取消选中行。全部店铺优惠券发放过后导入的数据全部清空。如图所示：

一、初始化页面默认全部选中“selectAll”，全部不选中“unselectAll”，写在onLoadSuccess列表加载完回调函数中

onLoadSuccess: function () {
    
    $("#datagrid_user").datagrid("selectAll"); //全部选中
    $("#datagrid_user").datagrid("unselectAll"); //全部不选中

    $("input:checkbox").prop("disabled", true); //禁用checkbox复选框
}

 二、取消点击行的选中事件（选中之后不可再取消），从网上看到的只是禁止选中，不是自己想要的，记录下来方便参考

//标示是否是勾选复选框选中行的，true - 是 , false - 否  定义变量量需要放在顶部
var IsCheckFlag = true; 

onClickCell: function (rowIndex, field, value) {
    IsCheckFlag = false;
},

onSelect: function (rowIndex, rowData) {
    if (!IsCheckFlag) {
        IsCheckFlag = true;
        $("#datagrid_user").datagrid("unselectRow", rowIndex);
    }
},

onUnselect: function (rowIndex, rowData) {
    if (!IsCheckFlag) {
        IsCheckFlag = true;
        $("#datagrid_user").datagrid("selectRow", rowIndex);
    }
}

 解决思路:
01.定义IsCheckFlag标识变量来保存是否点击了单元格，如果点击了单元格则此操作不是通过复选框操作的，标识设为false。
02.在选中和取消选中事件中判断操作来源，即IsCheckFlag的值。如果为false，选中操作执行取消选中，取消选中操作执行选中。
03.执行之前默认把标识值设为默认值，如果是复选框操作，是不触发 onClickCell 事件的，也就是标识值会是true。

注意点：
  IsCheckFlag = true;
  $("#datagrid_user").datagrid("unselectRow", rowIndex);
这两句代码的先后顺序，
  //如果把 IsCheckFlag = true放在下面，会形成类似死循环的情况。
  //因为 $("#datagrid_user").datagrid("unselectRow", rowIndex) 这个事件会直接触发 onUnselect事件，
  //而 IsCheckFlag = true; 没有执行。依次执行便会成为死循环。

三、禁止点击行选中，只可通过点击复选框选中

onClickRow: function (rowIndex, rowData) {
    $(this).datagrid('unselectRow', rowIndex);
},

四、行选中、取消选中全部禁止、将上述1、2方法综合一下就可以实现效果了。源码如下：

function GetList() {
    var strName = $("#txt_name").val();
    var strVipCard = $("#txt_vipcard").val();
    var strTelePhone = $("#txt_telephone").val()
    var strBrandType = $("#select_pp").val();
    var strBindShop = $("#txt_shopnumber").val();
    var strJfFrom = $("#txtJFFrom").val();
    var strJFTo = $("#txtJFTo").val();
    var IsCheckFlag = true; //标示是否是勾选复选框选中行的，true - 是 , false - 否
    /// 微信用户列表
    $("#datagrid_user").datagrid({
        url: "../HttpHandler/DiscountCoupon/DiscountCouponSendHandler.ashx",
        width: $(window).width() - 40,
        height: $(window).height() - 130,
        pageNumber: 1,
        pageSize: 20,
        pageList: [20, 30, 50],
        queryParams: {
            method: "getList",
            Name: strName,
            VipCard: strVipCard,
            TelePhone: strTelePhone,
            BrandType: strBrandType,
            BindShop: strBindShop,
            JFFrom: strJfFrom,
            JFTo: strJFTo
        },
        scrollbarSize: 10,
        idField: 'ROWNUM',
        fitColumns: true,
        loadMsg: '数据加载中',
        pagination: true,
        singleSelect: false,
        selectOnCheck: true,
        columns: [[
             {field: 'ROWNUM', checkbox: true, title: '选择', width: 40, align: 'center'},
             { field: 'KHMC', title: '绑定店铺', align: 'center', width: 50 },
             { field: 'GKDM', title: '代码', align: 'center', width: 50 },
             { field: 'Name', title: '姓名', align: 'center', width: 50 },
            //{ field: 'TYPE', title: '品牌', align: 'center', width: 70 },
             {
                 field: 'KLDM', title: '卡类型', align: 'center', width: 60, formatter: function (value, row, index) {
                     var result = "";
                     switch (value) {
                         case "01":
                             result = "KL银卡";
                             break;
                         case "02":
                             result = "KL金卡";
                             break;
                         case "22":
                             result = "KL积分卡";
                             break;
                         case "03":
                             result = "KR银卡";
                             break;
                         case "04":
                             result = "KR金卡";
                             break;
                         case "23":
                             result = "KR积分卡";
                             break;
                     }
                     return result;
                 }
             },
             { field: 'VipCard', title: 'VIP卡号', align: 'center', width: 50 },
             { field: 'TelePhone', title: '手机号', align: 'center', width: 100 },
            { field: 'DQJF', title: '当前积分', align: 'center', width: 70 },
            {
                field: '操作', title: '操作', align: 'center', width: 40, formatter: function (value, row, index) {
                    if (row.MbillID) {
                        return "<a id=\"SendSMS_" + index + "\" type=\"button\" >已验券</a>";
                    } else {
                        if (row.IsUsed == 1) {
                            return "<a id=\"SendSMS_" + index + "\" type=\"button\"  value=\"\" onclick=\"serachmbillid('" + row.Coupon + "','" + data_string(row.Createdate) + "','" + row.Vipcard + "')\">验券</a>";
                        }
                    }
                }
            }
        ]],
        onLoadSuccess: function () {
            $("#datagrid_user").datagrid("selectAll");  //初始化默认全部选中
            $("input:checkbox").prop("disabled", true);  //禁用复选框
        },
                
        onClickCell: function (rowIndex, field, value) {
            IsCheckFlag = false;
        },

        onSelect: function (rowIndex, rowData) {
            if (!IsCheckFlag) {
                IsCheckFlag = true;
                $("#datagrid_user").datagrid("unselectRow", rowIndex);
            }
        },

        onUnselect: function (rowIndex, rowData) {
            if (!IsCheckFlag) {
                IsCheckFlag = true;
                $("#datagrid_user").datagrid("selectRow", rowIndex);
            }
        }
                
    });
}

 ---红色部分为重点，如果你觉得对你有帮助的话，请给博主点个赞哦~