<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;
}
}
}