使用lauyi-table的复选框选中行的id记录与还原选中项

1，首先开启复选框，即在cols中加入一列{ type: 'checkbox', align: 'left', unresize: true, width: 70, }

2，声明一个全局变量var shopIds=[]，用来保存复选框选中行的id数据，（还原页面数据的时候，直接将后台返回的选中的id数据转变成数组赋值给shopIds）

3，在layui-table的数据加载完成后的回调函数里还原复选框选中;

done: function (res, curr, count) {
                        // 表头颜色
                        $('th').css({ 'background-color': '#F5F5F5', 'color': '#112222', 'font-weight': 'bold' });
                        if (!isSearchClick) {
                            $('.shop.modal-backdrop').show();
                            $('.shop.modal').show();
                        }
//以下是重点
                        table_data = res.data;
                        for (var i = 0; i < shopIds.length; i++) {//还原选中项
                            var item = shopIds[i];
//给一行数据中的某列或者某个标签一个ID，指为我们这行数据的id
                            $('#' + item + '').parents('tr').find('.layui-unselect.layui-form-checkbox').addClass('layui-form-checked');
                            $('#' + item + '').parents('tr').find('input[type="checkbox"]').prop('checked', true);
                        }
                    }

4，监听复选框按钮的选中事件，

table_data为table当前页的数据

//复选框选中事件                                
                table.on('checkbox(shopList)', function (obj) {
                    if (obj.checked == true) {
                        if (obj.type == 'one') {
                            shopIds.push(obj.data.ShopID);
                        } else { //全选
                            for (var i = 0; i < table_data.length; i++) {
                                shopIds.push(table_data[i].ShopID);
                            }
                        }
                    } else {
                        if (obj.type == 'one') {
                            for (var i = 0; i < shopIds.length; i++) {
                                if (shopIds[i] == obj.data.ShopID) {
                                    // ids.remove(i);用这个方法会报错not a function 
                                    shopIds.pop();   //建议用这个 
                                    shopIds.splice(i, 1);
                                }
                            }
                        } else { //全选
                            for (var i = 0; i < shopIds.length; i++) {
                                for (var j = 0; j < table_data.length; j++) {
                                    if (shopIds[i] == table_data[j].ShopID) {
                                        // ids.remove(i); 
                                        shopIds.pop();
                                        shopIds.splice(i, 1);
                                    }
                                }
                            }
                        }
                    }
                    console.log(shopIds);
                    console.log(table_data);
                });

OK，到此就完成了复选框选中项纪录与还原选中项的问题

下面是完整的table异步加载代码

 layui.use(['laypage', 'table'], function () {
                var table = layui.table;
                table.render({
                    elem: '#shopList',
                    height: 500,
                    //width:668,
                    cellMinWidth: 40,//最小宽度， 宽度自适应
                    url: '/Ajax/Shop.ashx', //数据接口
                    where: { //接口的其它参数
                        act: 'getShopPage',
                        adminid: adminId,
                        paymentid: paymentId,
                        keyword: $('.modal.shop input[name="searchKey"]').val()//关键字(目前支持商家名称、联系电话、联系人)的模糊检索
                    },
                    skin: 'line',
                    method: 'get', //如果无需自定义HTTP类型，可不加该参数
                    limit: 10,
                    limits: [10, 20],
                    //pageindex: num,
                    response: {
                        countName: 'recordCount' //规定数据总数的字段名称，默认：count
                    },
                    request: {
                        pageName: 'pageindex' //页码的参数名称，默认：page
                        , limitName: 'pagesize', //每页数据量的参数名，默认：limit                       
                    },
                    page: {
                        curr: 1, //设定初始在第 1 页
                        groups: 10,//只显示多个连续页码
                    },
                    cols: [[
                        { type: 'checkbox', align: 'left', unresize: true, width: 70, }
                        , { type: 'numbers', title: '序号', width: 70, align: 'left', unresize: true }
                        , {
                            field: 'ShopName', width: 159, title: '门店名称', templet: "#headImage", align: 'left', unresize: true, templet: function (item) {

                                return '<div class="oneElem" title="' + item.ShopName + '" id="' + item.ShopID + '">' + item.ShopName + '</div>';
                            }
                        }
                        , { field: 'Contact', width: 100, title: '门店联系人', align: 'left', unresize: true }
                        , { field: 'Phone', width: 100, title: '联系电话', align: 'left', unresize: true }
                        , {
                            field: 'Address', width: 150, title: '地址', align: 'left', unresize: true, templet: function (item) {

                                return '<div class="oneElem" title="' + item.Province + item.City + item.Area + item.Address + '">' + item.Province + item.City + item.Area + item.Address + '</div>';
                            }
                        }
                    //, { title: '操作', align: 'left', width: 89, toolbar: '#barDemo', unresize: true }

                    ]],
                    page: true, //开启分页\  
                    done: function (res, curr, count) {
                        // 表头颜色
                        $('th').css({ 'background-color': '#F5F5F5', 'color': '#112222', 'font-weight': 'bold' });
                        if (!isSearchClick) {
                            $('.shop.modal-backdrop').show();
                            $('.shop.modal').show();
                        }
                        table_data = res.data;
                        for (var i = 0; i < shopIds.length; i++) {//还原选中项
                            var item = shopIds[i];
                            $('#' + item + '').parents('tr').find('.layui-unselect.layui-form-checkbox').addClass('layui-form-checked');
                            $('#' + item + '').parents('tr').find('input[type="checkbox"]').prop('checked', true);
                        }
                    }
                });

                //复选框选中事件                                
                table.on('checkbox(shopList)', function (obj) {
                    if (obj.checked == true) {
                        if (obj.type == 'one') {
                            shopIds.push(obj.data.ShopID);
                        } else { //全选
                            for (var i = 0; i < table_data.length; i++) {
                                shopIds.push(table_data[i].ShopID);
                            }
                        }
                    } else {
                        if (obj.type == 'one') {
                            for (var i = 0; i < shopIds.length; i++) {
                                if (shopIds[i] == obj.data.ShopID) {
                                    // ids.remove(i);用这个方法会报错not a function 
                                    shopIds.pop();   //建议用这个 
                                    shopIds.splice(i, 1);
                                }
                            }
                        } else { //全选
                            for (var i = 0; i < shopIds.length; i++) {
                                for (var j = 0; j < table_data.length; j++) {
                                    if (shopIds[i] == table_data[j].ShopID) {
                                        // ids.remove(i); 
                                        shopIds.pop();
                                        shopIds.splice(i, 1);
                                    }
                                }
                            }
                        }
                    }
                    console.log(shopIds);
                    console.log(table_data);
                });
            });