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

demo">

 

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