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); } }
                
    });
}

 ---紅色部分為重點，如果你覺得對你有幫助的話，請給博主點個贊哦~