[JavaScript知识库]layui复选框跨页回显

全局JS声明变量

var checkDatas = [];//选中的数据
var dataArr= [];//当前页面数据
var eqVal='lineId';

监听的复选框函数

table.on('checkbox(test)', function(obj) {
            let  checked = obj.checked; //当前选择的状态，是否选中
            let  tempAllCheckDatas=[];  //存放所有页面选中数据的id
            if(checked){
                if( obj.type == 'one'){
                    checkDatas.push(obj.data);//选中，直接向ids push当前选中的数据
                    checkDatas.forEach(row=>{
                        tempAllCheckDatas.push(row[eqVal])
                    })
                }
                else{
                    checkDatas.forEach(row=>{
                        tempAllCheckDatas.push(row[eqVal])
                    })
                    for(var i=0;i<dataArr.length;i++){
                        if(tempAllCheckDatas.indexOf(dataArr[i][eqVal])<0){
                            tempAllCheckDatas.push(dataArr[i][eqVal])
                            checkDatas.push(dataArr[i])
                        }
                    }

                }
            }
            else{
                if(obj.type == 'one'){
                    checkDatas.map((item, index) => {//取消选择，循环判断是否相等，相等就删除
                        if (obj.data.eqVal == item.eqVal) {
                            checkDatas.splice(index, 1);
                        }
                    })
                }
            	else{
                    dataArr.forEach(row=>{
                        for(let i=0;i<checkDatas.length;i++){
                            if(checkDatas[i][eqVal]==row[eqVal]){
                                checkDatas.splice(i, 1);
                            }
                        }
                    })
                }
            }
            //console.log(checkDatas);
            //console.log(dataArr);
        });

table的渲染处理

table.render({
            elem: '#LAY_table_id(你的tableId)',
            url: (你的接口链接)
            ,defaultToolbar:[]
            ,toolbar: '#toolbarHtml' //开启头部工具栏
            ,title: '用户数据表',
            cols: [
                [
                    {checkbox: true, fixed: true},
                    {
                        title: '序号',
                        width: 80,
                        sort: true,
                        fixed: true,
                        type: 'numbers'
                    },{
                    field: 'lineId',
                    title: '线路id',
                    sort: true,
                    width: 110,
                    hide:true
                   }
                 ]
            ]
			,done: function(res, curr, count) {
			                dataArr = res.data;
			                set();
			 }
 });

抽取的回显函数

function set(){
            var len = dataArr.length;//当前页面数据长度
            var chooseNum = 0; //记录当前页选中的数据行数
            for (var i = 0; i < dataArr.length; i++) {
                for (var j = 0; j < checkDatas.length; j++) {
                    if(dataArr[i][eqVal] === checkDatas[j][eqVal]){
                        dataArr[i]["LAY_CHECKED"] = 'true';
                        var index=i;
                        $('.layui-table tr[data-index=' + i + '] input[type="checkbox"]').prop('checked', true);
                        $('.layui-table tr[data-index=' + i + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                        chooseNum++;
                    }
                }
            }
            //console.log(len)
            //console.log(chooseNum)

            if (len !== 0 && chooseNum === len) {   //表示该页全选  --  全选按钮样式回显
                alert("本页已被全选")
                $(' .layui-table-header tr  input[lay-filter="layTableAllChoose"]').prop('checked', true);
                $(' .layui-table-header tr  input[lay-filter="layTableAllChoose"]').next().addClass('layui-form-checked');
            }
        };

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖