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() - ,
height: $(window).height() - ,
pageNumber: ,
pageSize: ,
pageList: [, , ],
queryParams: {
method: "getList",
Name: strName,
VipCard: strVipCard,
TelePhone: strTelePhone,
BrandType: strBrandType,
BindShop: strBindShop,
JFFrom: strJfFrom,
JFTo: strJFTo
},
scrollbarSize: ,
idField: 'ROWNUM',
fitColumns: true,
loadMsg: '数据加载中',
pagination: true,
singleSelect: false,
selectOnCheck: true,
columns: [[
{field: 'ROWNUM', checkbox: true, title: '选择', width: , align: 'center'},
{ field: 'KHMC', title: '绑定店铺', align: 'center', width: },
{ field: 'GKDM', title: '代码', align: 'center', width: },
{ field: 'Name', title: '姓名', align: 'center', width: },
//{ field: 'TYPE', title: '品牌', align: 'center', width: 70 },
{
field: 'KLDM', title: '卡类型', align: 'center', width: , formatter: function (value, row, index) {
var result = "";
switch (value) {
case "":
result = "KL银卡";
break;
case "":
result = "KL金卡";
break;
case "":
result = "KL积分卡";
break;
case "":
result = "KR银卡";
break;
case "":
result = "KR金卡";
break;
case "":
result = "KR积分卡";
break;
}
return result;
}
},
{ field: 'VipCard', title: 'VIP卡号', align: 'center', width: },
{ field: 'TelePhone', title: '手机号', align: 'center', width: },
{ field: 'DQJF', title: '当前积分', align: 'center', width: },
{
field: '操作', title: '操作', align: 'center', width: , formatter: function (value, row, index) {
if (row.MbillID) {
return "<a id=\"SendSMS_" + index + "\" type=\"button\" >已验券</a>";
} else {
if (row.IsUsed == ) {
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);
}
}
});
}
---红色部分为重点,如果你觉得对你有帮助的话,请给博主点个赞哦~
easyui datagrid checkbox复选框取消单击选中事件、初始全选全不选等问题解决的更多相关文章
- ExtJS中,将Grid表头中的全选复选框取消复选
今天发现公司产品用的EXTJS中使用Grid时,Grid表头中的全选复选框的选中状态不是很准确,就写了这个小扩展 在js中加入下面方法,在需要取消全选的地方调用即可,例:Ext.getCmp('gri ...
- Androd点击一个选框取消其他选框
说明: 我做的体温填报系统需要在填报体温时勾选有无特殊情况 当勾选'无'时需要将用户勾选的其他选框取消 当勾选其他选框时需要将'无'这个选框取消 效果: 代码: addTem.xml <Line ...
- easyui datagrid checkbox multiple columns have been done do
lengku1987 2013-01-06 22:27:47 Sponsored Links easyui datagrid checkbox multiple columns have ...
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
- EasyUI datagrid checkbox数据设定与取值(转自http://blog.csdn.net/baronyang/article/dnetails/9323463,感谢分享,谢谢)
这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Che ...
- easyui datagrid 通过复选框删除新追加的数据问题
之前写好的功能在保存好数据后再通过复选框删除是没有问题的,可现在想多追加几行,然后选择删除新追加的某几行或一行,通过$('#dg').datagrid('getChecked')方法返回选中行,然而返 ...
- EasyUI DataGrid Checkbox 多选 获取选中行中的内容
<table id='grid' class='easyui-datagrid' style='width:950px;height:405px' url='Ajax-index.php?mod ...
- easyui datagrid checkbox的相关属性整理
DataGrid其中与选择,勾选相关 DataGrid属性: singleSelect boolean 如果为true,则只允许选择一行. false ctrlSelect boolean 在启用多行 ...
- easyui datagrid checkbox选中事件
$('#grid_Order').datagrid({ onCheck: function(index, data) { //alert(data[0]); / ...
随机推荐
- Hibernate的CRUD配置及简单使用
参考博客:https://blog.csdn.net/qq_38977097/article/details/81326503 1.首先是jar包,可以在官网下载. 或者点击下面链接下载 链接:htt ...
- Pandas中DataFrame数据合并、连接(concat、merge、join)之merge
二.merge:通过键拼接列 类似于关系型数据库的连接方式,可以根据一个或多个键将不同的DatFrame连接起来. 该函数的典型应用场景是,针对同一个主键存在两张不同字段的表,根据主键整合到一张表里面 ...
- Badboy + JMeter性能测试(转)
1. 软件介绍 1.1 Badboy Badboy是用来录制操作过程的,它录制的结果是被jmeter做并发测试的素材使用. 下载网址:http://www.badboy.com.au/ 1.2下 ...
- docker安装redis并允许外网访问
拉取redis镜像 docker pull redis:3.2 本地新建redis配置文件 redis.conf ,写入以下内容 #允许外网访问bind 0.0.0.0 daemonize NO pr ...
- SSM跨域配置
1.后台跨域要引用两个jar包(cors-filter-1.7.jar.java-property-utils-1.9.jar) 提供下载地址: 链接: https://pan.baidu.com/s ...
- php+上传视频大文件
理清思路: 引入了两个概念:块(block)和片(chunk).每个块由一到多个片组成,而一个资源则由一到多个块组成 块是服务端的永久数据存储单位,片则只在分片上传过程中作为临时存储的单位.服务端会以 ...
- 基于c++回顾
c++类 特别的构造函数 默认参数: 几乎所有函数都可以使用默认参数,但在构造函数中最为普遍 初始化列表 用来直接初始化数据成员;与列表顺序无关,与成员申明顺序有关;如果一个成员是const的,那么, ...
- 2019牛客暑期多校训练营(第二场)D bitset
题意 给一个n个结点的带点权的图,找到第k小的团的权值 分析 用bitset表示团的状态,一个结点必须和团里的每个结点都连边才能加进去,所以可以直接用\(\&\)运算来判断一个结点是否能加进去 ...
- 微信小程序搭建mpvue+vant+flyio
导语 上一篇文章微信小程序搭建mpvue+vant已经介绍了如何搭起mpvue项目及引入vant,本篇文章继续在它的基础上,引入flyio,并做一些封装,目的是为了在小程序发起请求. 这时读者会有些疑 ...
- beta week 2/2 Scrum立会报告+燃尽图 03
此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9956 一.小组情况 组长:贺敬文组员:彭思雨 王志文 位军营 徐丽君队名: ...