layui分页时复选框被选中问题

<table class="layui-hide" id="test" lay-filter="demo"></table>
var quanju = new Array();//全局
var huancun = new Array();//缓存
layui.use(['form','table'], function(){
  var table = layui.table;
  var form = layui.form;
table.render({
  elem: '#test'
  ,url:'/zjzk/expert/listPage'
  ,request:{
    pageName: 'page' //页码的参数名称,默认:page
    ,limitName: 'size' //每页数据量的参数名,默认:limit
  }
  ,response: {
    statusName: 'code' //数据状态的字段名称,默认:code
    ,statusCode: 0 //成功的状态码,默认:0
    ,msgName: '' //状态信息的字段名称,默认:msg
    ,countName: 'count' //数据总数的字段名称,默认:count
    ,dataName: 'data' //数据列表的字段名称,默认:data
  }
  ,cols: [[
    {type:'checkbox', width:'10%'}
    ,{field:'id',  title: '序号' , width:'10%'}
    ,{field:'name',  title: '姓名' , width:'10%'}
    ,{field:'post', title: '职位', width:'20%' }
    ,{field:'professional', title: '专业', width:'20%'}
    ,{field:'do', title: '操作' ,toolbar:'#barDemo', width:'20%'}
  ]]
  ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
    ,curr: 1 //设定初始在第 5 页
    ,groups: 2 //只显示 1 个连续页码
    ,first: true //不显示首页
    ,last: true //不显示尾页
  }
  ,id: 'testReload'
  ,limit:10
  ,done: function(res, curr, count){
    //如果是异步请求数据方式,res即为你接口返回的信息。
    //设置全部数据到全局变量
    quanju=res.data;
    //在缓存中找到id ,然后设置data表格中的选中状态
    //循环所有数据,找出对应关系,设置checkbox选中状态
    for(var i=0;i< res.data.length;i++){
      for (var j = 0; j < huancun.length; j++) {
        //数据id和要勾选的id相同时checkbox选中
        if(res.data[i].id == huancun[j]) {
          //这里才是真正的有效勾选
          res.data[i]["LAY_CHECKED"]='true';
          //找到对应数据改变勾选样式,呈现出选中效果
          var index= res.data[i]['LAY_TABLE_INDEX'];
          $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
          $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
        }
      }
    }
    var checkStatus = table.checkStatus('testReload');
    if(checkStatus.isAll){//是否全选
      $('.layui-table th[data-field="0"] input[type="checkbox"]').prop('checked', true);//data-field值默认为0,如果在分页部分自定义了属性名,则需要改成对应的属性名
      $('.layui-table th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');//data-field值默认为0,如果在分页部分自定义了属性名,则需要改成对应的属性名
      $('.layui-table-body table.layui-table tbody tr').addClass('layui-table-click');
    }
  }
});

 

//复选框选中监听,将选中的id 设置到缓存数组,或者删除缓存数组
table.on('checkbox(demo)', function (obj) {
  console.log(123,obj)
  if(obj.checked==true){
    if(obj.type=='one'){
      huancun.push(obj.data.id);
      obj.tr.addClass('layui-table-click');  //选样式
    }else{
      for(var i=0;i<quanju.length;i++){
        huancun.push(quanju[i].id);
        $('.layui-table-body table.layui-table tbody tr').addClass('layui-table-click');  //全选样式
      }
    }
  }else{
    if(obj.type=='one'){
      for(var i=0;i<huancun.length;i++){
        if(huancun[i]==obj.data.id){
          obj.tr.removeClass('layui-table-click');  //不选样式
          removeByValue(huancun,huancun[i]);//调用自定义的根据值移除函数
        }
      }
    }else{
      for(var i=0;i<huancun.length;i++){
        for(var j=0;j<quanju.length;j++){
          if(huancun[i]==quanju[j].id){
            $('.layui-table-body table.layui-table tbody tr').removeClass('layui-table-click');  //全不选样式
            removeByValue(huancun,+huancun[i]);//调用自定义的根据值移除函数
          }
        }
      }
    }
  }
});
//自定义方法,根据值去移除
function removeByValue(arr, val) {
  for(var i = 0; i < arr.length; i++) {
    if(arr[i] == val) {
      arr.splice(i, 1);
      break;
    }
  }
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值