easyuidatagridcheckbox复选框取消单击选中事件、初始全选全不选等
问题解决
系统业务需要，导⼊的列表数据默认全部选中，且不可取消选中⾏。全部店铺优惠券发放过后导⼊的数据全部清空。如图所⽰：
⼀、初始化页⾯默认全部选中“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);
}
}
解决思路:
easyuidatagrid01.定义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);
}
}
});
}
-
--红⾊部分为重点，如果你觉得对你有帮助的话，请给博主点个赞哦~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。