layui之 table中checkbox复选框，跨页保存选中赋值状态

参考链接
https://blog.csdn.net/HuperSan/article/details/99896878
https://blog.csdn.net/weixin_43821151/article/details/103807037

1 核心就是声明全局变量用来缓存checkbox的操作。

var quanju = new Array();//全局，所有数据
var huancun = new Array();//缓存，存贮 被选择的数据

2 并且在分页的done属性中编写函数，让它每次重载分页时根据全局变量对checkbox进行默认的选中操作，移除同理。

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].studentno == 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才能抓取到选中的状态
		  var checkStatus = table.checkStatus('studentTable');//这里的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，如果在分页部分自定义了属性名，则需要改成对应的属性名
          }
}

3 删除方法

 //自定义方法，根据值去移除
 function removeByValue(arr, val) {
	 for(var i = 0; i < arr.length; i++) {
	    if(arr[i] == val) {
	       arr.splice(i, 1);
	       break;
	    }
	 }
 }

整html

<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit">详细信息</a>
</script>
 
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">选中导出学生详细信息</button>
	</div>
</script>
 
<script type="text/javascript">
	//一般直接写在一个js文件中
	layui.use([ "table" ], function(args) {
		var layer = layui.layer, table = layui.table;
		var quanju = new Array();//全局
		var huancun = new Array();//缓存
		
		table.render({
			elem : '#tab',//需要被渲染的标签，此处使用id选择器指定，#为id，#后面的值是table中id属性的值
			toolbar : '#toolbarDemo',
			cols: [[
    				{type:'checkbox'}
    				,{field:'vip', title: '等级', width:90,sort:true}
    		]],
			defaultToolbar:[''],//layui提供的toolbar方法，使toolbar工具条右侧的三个工具按钮不可见
			limits : [ 2, 5, 10, 50, 100 ],//分页每页条数的可选项
			text : {
				none : '没有找到您要找学生'
			},//当没有查询到结果时显示的提示文字
			id : 'studentTable',//这个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].studentno == 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才能抓取到选中的状态
				var checkStatus = table.checkStatus('studentTable');//这里的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 设置到缓存数组,或者删除缓存数组
        table.on('checkbox(test)', function (obj) {
           if(obj.checked==true){
               if(obj.type=='one'){
                   huancun.push(obj.data.studentno);
              }else{
                   for(var i=0;i<quanju.length;i++){
                       huancun.push(quanju[i].studentno);
                   }
               }
           }else{
               if(obj.type=='one'){
                   for(var i=0;i<huancun.length;i++){
                      if(huancun[i]==obj.data.studentno){
            			  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].studentno){
                        	   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;
			    }
			 }
		}
		
		//头工具栏事件
		table.on('toolbar(test)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			switch (obj.event) {
			case 'getCheckData'://导出事件
				if(huancun.length<1||huancun==""){
					alert("请选择导出信息！");
					return false;
				}
				var a = huancun;
				var user= a.join(",");
				if(user !== null) {   // search_time 有值
			         //使用ajax获取数据
			          $.ajax({
			              url: "{{url('user/export/phone')}}",
			              type: 'get',
			              data: {
			                      username : user
			                    },
			              async: false,
			              dataType: 'json',
			              success: function (res) {
			                  console.log('走到成功导出');
			                  console.log(res);
			                  //使用table.exportFile()导出数据
			                  //推荐方法，此处放入layui table id，导出的表格会继承该table的配置 展示效果和导出效果一致
			                  table.exportFile('test', res, 'xls');
			                  //第二种方法 写入数组形式的自定义列名，顺序需要跟返回数据的顺序对照 不推荐
			                  table.exportFile(['手机号码'], res, 'xls');
			              }
			          });
			      }else{
			          layer.open({
			              type: 1
			              // ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
			              ,id: 'layerDemo' //防止重复弹出
			              ,content: '<div style="padding: 20px 80px;">'+ '请勾选导出用户' +'</div>'
			              ,btn: '关闭全部'
			              ,btnAlign: 'c' //按钮居中
			              ,shade: 0 //不显示遮罩
			              ,yes: function(){
			                  layer.closeAll();
			              }
			          });
			      }
		});


	});
</script>