参考链接
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>