layui.table（表格）跨页多选

layui版本：2.5.4
使用数据表格时可能会需要在翻页时保留各个页面选中行的信息，效果如下。

效果演示

实现思路

实现思路大致分为以下三步
1.定义两个全局变量用于保存选中行的id，以及当前页所有行的id（全选时使用）
2.监听表格复选框的勾选事件，将选中行的信息存入全局变量（包括全选）
3.在表格加载完成的回调方法（done）中根据保存的变量回显选中行

示例代码

layui.use('table', function () {
    let table = layui.table
        , form = layui.form
        , $ = layui.$;

    // 设置全局变量以保存选中行信息
    let ids = new Array();
    // 保存当前页全部数据id，点击全选时使用
    let tableIds = new Array();

    table.render({
        elem: '#test'
        , url: '/demo/girl/list/'
        , cols: [[
            {type: 'checkbox', width: 70}
            , {field: 'id', title: 'ID'}
            , {field: 'age', title: '年龄'}
            , {field: 'city', title: '城市'}
        ]]
        , request: {
            pageName: 'current' //页码的参数名称，默认：page
            , limitName: 'size' //每页数据量的参数名，默认：limit
        }
        , page: true
        , done: function (res) {
            // 设置当前页全部数据id到全局变量
            tableIds = res.data.map(function (value) {
                return value.id;
            });
            // 设置当前页选中项
            $.each(res.data, function (idx, val) {
                if (ids.indexOf(val.id) > -1) {
                    val["LAY_CHECKED"] = 'true';
                    //找到对应数据改变勾选样式，呈现出选中效果
                    let index = val['LAY_TABLE_INDEX'];
                    $('tr[data-index=' + index + '] input[type="checkbox"]').click();
                    form.render('checkbox'); //刷新checkbox选择框渲染
                }
            });
            // 获取表格勾选状态，全选中时设置全选框选中
            let checkStatus = table.checkStatus('test');
            if (checkStatus.isAll) {
                $('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
                form.render('checkbox'); //刷新checkbox选择框渲染
            }
        }
    });


    // 监听勾选事件
    table.on('checkbox(test)', function (obj) {
        if (obj.checked == true) {
            if (obj.type == 'one') {
                ids.push(obj.data.id);
            } else {
                for (let i = 0; i < tableIds.length; i++) {
                    //当全选之前选中了部分行进行判断，避免重复
                    if (ids.indexOf(tableIds[i]) == -1) {
                        ids.push(tableIds[i]);
                    }
                }
            }
        } else {
            if (obj.type == 'one') {
                let i = ids.length;
                while (i--) {
                    if (ids[i] == obj.data.id) {
                        ids.splice(i, 1);
                    }
                }
            } else {
                let i = ids.length;
                while (i--) {
                    if (tableIds.indexOf(ids[i]) != -1) {
                        ids.splice(i, 1);
                    }
                }
            }
        }
    });
})

可能用到

一个页面有多个表格需要跨页多选时，回显选中行需要加上对应表格的选择器（包括全选的回显）

$('#Table1 tr[data-index=' + index + '] input[type="checkbox"]').click();

如果是单选表格只需要记录选中行id就行，回显的写法将checkbox改为radio就行

done: function (res, curr, count) {
	if (userId != '') {
	    $.each(res.data, function (idx, val) {
	        // 根据用户id回显
	        if (userId == val.id) {
	            val["LAY_CHECKED"] = 'true';
	            //找到对应数据改变勾选样式，呈现出选中效果
	            let index = val['LAY_TABLE_INDEX'];
	            $('tr[data-index=' + index + '] input[type="radio"]').click();
	            form.render('radio'); //刷新radio选择框渲染
	        }
	    });
	}
}