layui的table翻页checkbox不缓存的问题

layui的table翻页checkbox不缓存的问题

出现的问题

layui的数据表格table开启复选框，翻页后前一页的checkbox数据丢失

解决办法

代码

//一般直接写在一个js文件中
	layui.use([ "table" ], function(args) {
		
		var quanju = new Array();//全局
		var huancun = new Array();//缓存
		
		table.render({
			
			
			id : 'alumniListTable',//这个table.render渲染模块的id，和网页无关，将用于其他js模块
			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');
                            }
                        }
                    }
                    //设置全选checkbox的选中状态，只有改变LAY_CHECKED的值， table.checkStatus才能抓取到选中的状态
                  	//设置全选checkbox的选中状态，只有改变LAY_CHECKED的值， table.checkStatus才能抓取到选中的状态
					var checkStatus = table.checkStatus('alumniListTable');//这里的studentTable是指分页中的id
                    if(checkStatus.isAll){//是否全选
                        //layTableAllChoose
                     $('.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，如果在分页部分自定义了属性名，则需要改成对应的属性名
                    }
			}
		});//渲染结束
		
        //复选框选中监听,将选中的id 设置到缓存数组,或者删除缓存数组
        //这里的checkbox(XXX)为HTML代码中table的id
        table.on('checkbox(alumniList)', function (obj) {
           if(obj.checked==true){
               if(obj.type=='one'){
                   huancun.push(obj.data.id);
              }else{
                   for(var i=0;i<quanju.length;i++){
                       huancun.push(quanju[i].id);
                   }
               }
           }else{
               if(obj.type=='one'){
                   for(var i=0;i<huancun.length;i++){
                      if(huancun[i]==obj.data.id){
            			  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){
                        	   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;
			    }
			}
		}
	});