easyUI grid实现全选全清

最新推荐文章于 2023-03-08 15:58:58 发布

weixin_34355881

最新推荐文章于 2023-03-08 15:58:58 发布

阅读量519

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/kkrgwbj/blog/500779

版权

2019独角兽企业重金招聘Python工程师标准>>>

先看效果：

当勾选全选的时候，所有记录都全选，当取消勾选时候，所有记录都取消。当手动取消某一行的时候，仅仅只取消勾选你取消的那一行。

实现思路：

记录你取消的行的id到数组中。然后在onloadSuccess里面通过判断是否在当前页中。来判断是否取消选中。简单代码如下：

grid的创建就不写了，只写主要的代码：

var markAll = '';//标记是否选中了全选按钮
 var cacelIds = [];//标记取消选中行的ID
 var checkIds = [];//标记选中的行的ID 
 //grid的事件
  onLoadSuccess : function(data) {
      if (markAll == 'all') {
       $(this).datagrid('checkAll');
      }
      if (markAll == '' && checkIds.length == 0) {
       $(this).datagrid('uncheckAll');
      }
      $.each(cacelIds, function(index) {
       var rowIndex = $('#bankData_data_grid').datagrid(
         'getRowIndex', cacelIds[index]);
       if (rowIndex != -1) {
        $('#bankData_data_grid').datagrid('uncheckRow',
          rowIndex);
       }
      });
     },
     onCheck : function(index, row) {
      //选中行的时候，移除记录的选中的id，并且添加选中行的ID到选中id的数组里面
     checkIds.push(row.ID);
     if (cacelIds.length > 0) {
      cacelIds.pop(row.ID);
     }
     //当选中行的时候，判断是否都选中了，如果都选中，则全选的勾选框勾选
     if (cacelIds.length == 0 && markAll == 'all') {
      $('#allCheck').prop('checked', true);
     }
    },
    onUncheck : function(index, row) {
     //当取消选中行的时候，将全选的勾选改变为非勾选    
     checkIds.pop(row.ID);
     $('#allCheck').attr('checked', false);
     if ($.inArray(row.ID, cacelIds) == -1) {
      //记录ID到取消勾选的记录集合里面
      cacelIds.push(row.ID);
     }
    }
    
    
     /*全选*/
 function checkAll(obj) {
  //是否选中
  var isCheck = $('#allCheck:checked').length >= 1 ? true : false;
  if (isCheck) {
   markAll = 'all';
   $('#bankData_data_grid').datagrid('checkAll');
   cacelIds = [];//清空记录的id
  } else {
   $('#bankData_data_grid').datagrid('uncheckAll');
   markAll = '';
   checkIds=[];//清空记录id 

  }
 }

转载于:https://my.oschina.net/kkrgwbj/blog/500779