zoukankan      html  css  js  c++  java
  • 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",
             $(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: '选择',  40, align: 'center'},
                 { field: 'KHMC', title: '绑定店铺', align: 'center',  50 },
                 { field: 'GKDM', title: '代码', align: 'center',  50 },
                 { field: 'Name', title: '姓名', align: 'center',  50 },
                //{ field: 'TYPE', title: '品牌', align: 'center',  70 },
                 {
                     field: 'KLDM', title: '卡类型', align: 'center',  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',  50 },
                 { field: 'TelePhone', title: '手机号', align: 'center',  100 },
                { field: 'DQJF', title: '当前积分', align: 'center',  70 },
                {
                    field: '操作', title: '操作', align: 'center',  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);
                }
            }
                    
        });
    }

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

  • 相关阅读:
    浏览器中包含什么?三个常驻线程?
    TCP粘包和拆包
    TCP有限状态机
    TCP的拥塞控制
    TCP滑动窗口实现流量控制
    http状态码及意义
    OSI七层结构
    浏览器的event loop
    history api
    表单提交的方式
  • 原文地址:https://www.cnblogs.com/guozhaoxin/p/11971457.html
Copyright © 2011-2022 走看看