系统业务需要,导入的列表数据默认全部选中,且不可取消选中行。全部店铺优惠券发放过后导入的数据全部清空。如图所示:

一、初始化页面默认全部选中“selectAll”,全部不选中“unselectAll”,写在onLoadSuccess列表加载完回调函数中

  1. onLoadSuccess: function () {
  2.  
  3. $("#datagrid_user").datagrid("selectAll"); //全部选中
  4. $("#datagrid_user").datagrid("unselectAll"); //全部不选中
  5.  
  6. $("input:checkbox").prop("disabled", true); //禁用checkbox复选框
  7. }

 二、取消点击行的选中事件(选中之后不可再取消),从网上看到的只是禁止选中,不是自己想要的,记录下来方便参考

  1. //标示是否是勾选复选框选中行的,true - 是 , false - 否 定义变量量需要放在顶部
  2. var IsCheckFlag = true;
  3.  
  4. onClickCell: function (rowIndex, field, value) {
  5. IsCheckFlag = false;
  6. },
  7.  
  8. onSelect: function (rowIndex, rowData) {
  9. if (!IsCheckFlag) {
  10. IsCheckFlag = true;
  11. $("#datagrid_user").datagrid("unselectRow", rowIndex);
  12. }
  13. },
  14.  
  15. onUnselect: function (rowIndex, rowData) {
  16. if (!IsCheckFlag) {
  17. IsCheckFlag = true;
  18. $("#datagrid_user").datagrid("selectRow", rowIndex);
  19. }
  20. }

解决思路:
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; 没有执行。依次执行便会成为死循环。

三、禁止点击行选中,只可通过点击复选框选中

  1. onClickRow: function (rowIndex, rowData) {
  2. $(this).datagrid('unselectRow', rowIndex);
  3. },

四、行选中、取消选中全部禁止、将上述1、2方法综合一下就可以实现效果了。源码如下:

  1. function GetList() {
  2. var strName = $("#txt_name").val();
  3. var strVipCard = $("#txt_vipcard").val();
  4. var strTelePhone = $("#txt_telephone").val()
  5. var strBrandType = $("#select_pp").val();
  6. var strBindShop = $("#txt_shopnumber").val();
  7. var strJfFrom = $("#txtJFFrom").val();
  8. var strJFTo = $("#txtJFTo").val();
  9. var IsCheckFlag = true; //标示是否是勾选复选框选中行的,true - 是 , false - 否
  10. /// 微信用户列表
  11. $("#datagrid_user").datagrid({
  12. url: "../HttpHandler/DiscountCoupon/DiscountCouponSendHandler.ashx",
  13. width: $(window).width() - ,
  14. height: $(window).height() - ,
  15. pageNumber: ,
  16. pageSize: ,
  17. pageList: [, , ],
  18. queryParams: {
  19. method: "getList",
  20. Name: strName,
  21. VipCard: strVipCard,
  22. TelePhone: strTelePhone,
  23. BrandType: strBrandType,
  24. BindShop: strBindShop,
  25. JFFrom: strJfFrom,
  26. JFTo: strJFTo
  27. },
  28. scrollbarSize: ,
  29. idField: 'ROWNUM',
  30. fitColumns: true,
  31. loadMsg: '数据加载中',
  32. pagination: true,
  33. singleSelect: false,
  34. selectOnCheck: true,
  35. columns: [[
  36. {field: 'ROWNUM', checkbox: true, title: '选择', width: , align: 'center'},
  37. { field: 'KHMC', title: '绑定店铺', align: 'center', width: },
  38. { field: 'GKDM', title: '代码', align: 'center', width: },
  39. { field: 'Name', title: '姓名', align: 'center', width: },
  40. //{ field: 'TYPE', title: '品牌', align: 'center', width: 70 },
  41. {
  42. field: 'KLDM', title: '卡类型', align: 'center', width: , formatter: function (value, row, index) {
  43. var result = "";
  44. switch (value) {
  45. case "":
  46. result = "KL银卡";
  47. break;
  48. case "":
  49. result = "KL金卡";
  50. break;
  51. case "":
  52. result = "KL积分卡";
  53. break;
  54. case "":
  55. result = "KR银卡";
  56. break;
  57. case "":
  58. result = "KR金卡";
  59. break;
  60. case "":
  61. result = "KR积分卡";
  62. break;
  63. }
  64. return result;
  65. }
  66. },
  67. { field: 'VipCard', title: 'VIP卡号', align: 'center', width: },
  68. { field: 'TelePhone', title: '手机号', align: 'center', width: },
  69. { field: 'DQJF', title: '当前积分', align: 'center', width: },
  70. {
  71. field: '操作', title: '操作', align: 'center', width: , formatter: function (value, row, index) {
  72. if (row.MbillID) {
  73. return "<a id=\"SendSMS_" + index + "\" type=\"button\" >已验券</a>";
  74. } else {
  75. if (row.IsUsed == ) {
  76. return "<a id=\"SendSMS_" + index + "\" type=\"button\" value=\"\" onclick=\"serachmbillid('" + row.Coupon + "','" + data_string(row.Createdate) + "','" + row.Vipcard + "')\">验券</a>";
  77. }
  78. }
  79. }
  80. }
  81. ]],
  82. onLoadSuccess: function () {
  83. $("#datagrid_user").datagrid("selectAll"); //初始化默认全部选中
  84. $("input:checkbox").prop("disabled", true); //禁用复选框
  85. },
  86. onClickCell: function (rowIndex, field, value) {
  87. IsCheckFlag = false;
  88. },
  89. onSelect: function (rowIndex, rowData) {
  90. if (!IsCheckFlag) {
  91. IsCheckFlag = true;
  92. $("#datagrid_user").datagrid("unselectRow", rowIndex);
  93. }
  94. },
  95. onUnselect: function (rowIndex, rowData) {
  96. if (!IsCheckFlag) {
  97. IsCheckFlag = true;
  98. $("#datagrid_user").datagrid("selectRow", rowIndex);
  99. }
  100. }
  101.  
  102. });
  103. }

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

easyui datagrid checkbox复选框取消单击选中事件、初始全选全不选等问题解决的更多相关文章

  1. ExtJS中,将Grid表头中的全选复选框取消复选

    今天发现公司产品用的EXTJS中使用Grid时,Grid表头中的全选复选框的选中状态不是很准确,就写了这个小扩展 在js中加入下面方法,在需要取消全选的地方调用即可,例:Ext.getCmp('gri ...

  2. Androd点击一个选框取消其他选框

    说明: 我做的体温填报系统需要在填报体温时勾选有无特殊情况 当勾选'无'时需要将用户勾选的其他选框取消 当勾选其他选框时需要将'无'这个选框取消 效果: 代码: addTem.xml <Line ...

  3. easyui datagrid checkbox multiple columns have been done do

    lengku1987   2013-01-06 22:27:47   Sponsored Links   easyui datagrid checkbox multiple columns have ...

  4. jQuery EasyUI DataGrid Checkbox 数据设定与取值

    纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...

  5. EasyUI datagrid checkbox数据设定与取值(转自http://blog.csdn.net/baronyang/article/dnetails/9323463,感谢分享,谢谢)

    这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数据列的 Checkbox 设定为 Che ...

  6. easyui datagrid 通过复选框删除新追加的数据问题

    之前写好的功能在保存好数据后再通过复选框删除是没有问题的,可现在想多追加几行,然后选择删除新追加的某几行或一行,通过$('#dg').datagrid('getChecked')方法返回选中行,然而返 ...

  7. EasyUI DataGrid Checkbox 多选 获取选中行中的内容

    <table id='grid' class='easyui-datagrid' style='width:950px;height:405px' url='Ajax-index.php?mod ...

  8. easyui datagrid checkbox的相关属性整理

    DataGrid其中与选择,勾选相关 DataGrid属性: singleSelect boolean 如果为true,则只允许选择一行. false ctrlSelect boolean 在启用多行 ...

  9. easyui datagrid checkbox选中事件

    $('#grid_Order').datagrid({       onCheck: function(index, data) { //alert(data[0]);               / ...

随机推荐

  1. 精选30道Java多线程面试题

    1.线程和进程的区别 进程是应用程序的执行实例.比如说,当你双击的Microsoft Word的图标,你就开始运行的Word的进程.线程是执行进程中的路径.另外,一个过程可以包含多个线程.启动Word ...

  2. PHP类的设计模式

    单例模式 <?php class mysingle { private static $myinstance =null; private function __construct() { } ...

  3. pytorch 图片处理.md

    本篇所有代码位置链接

  4. .py文件打包成.exe文件

    # 使用pyinstaller模块 # pip install pyinstaller # 在命令行执行 pyinstaller -F xxx.py

  5. jsPDF – 基于 HTML5 的强大 PDF 生成工具

    jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档. 使用方法很简单,只要引入 jsPDF 库,然后调用内置的方法就可以了. 米扑科技项目用到了HHTML5生成PD ...

  6. redis远程连接命令

    redis-cli -h 172.17.0.85 -p 6379 输入密码 auth "1234

  7. 【学习】eclipse自动提示+自动补全

    解决代码的自动提示问题: 1.打开 Eclipse -> Window -> Perferences 2.找到Java 下的 Editor 下的 Content Assist , 右边出现 ...

  8. leetcode题目2.两数相加(中等)

    题目描述: 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来 ...

  9. 2018-2019-2 20175215 实验三《敏捷开发与XP实践》实验报告

    一.实验内容与步骤 1.安装.使用alibaba 插件规范代码 在IDEA的setting中找到plugins并搜索alibaba,点击install进行安装 重启IDEA后,在代码中右击点击编码规约 ...

  10. 2018-2019-2 网络对抗技术 20165205 Exp8 Web基础

    2018-2019-2 网络对抗技术 20165205 Exp8 Web基础 1.原理与实践说明 1.1实践内容 Web前段HTML:能正常安装.启停Apache.理解HTML,理解表单,理解GET与 ...