系统业务需要,导入的列表数据默认全部选中,且不可取消选中行。全部店铺优惠券发放过后导入的数据全部清空。如图所示:
一、初始化页面默认全部选中“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); } } }); }
---红色部分为重点,如果你觉得对你有帮助的话,请给博主点个赞哦~