2020-10-16

layui.table(表格)跨页多选

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

实现思路,1.选中的时候刷新全选框状态 2.全选/全不选的时候刷新勾选框状态 3.翻页后刷新勾选和全选状态。

已有大佬实现类似功能,但稍有瑕疵,我追加改进,大佬文章:https://blog.csdn.net/zjh19961213/article/details/96482133

2020-10-16

代码片段,第一次发,不知道怎么给代码着色,见谅:


 //保存所有页的数据,仅适用于数据量小的时候
    var currentData = [];

    // 设置全局变量以保存选中行信息
    let ids = new Array();

 

done: function (res, e) {
                //res是数据,e是当前页码        
                //重写选择功能
        
                // 设置当前页选中项
                $.each(res.data, function (idx, val) {
                    if (ids.indexOf(val.nodecode) > -1) {
                        val["LAY_CHECKED"] = 'true';
                        //找到对应数据改变勾选样式,呈现出选中效果
                        let index = val['LAY_TABLE_INDEX'];
                        $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked','true');
                        form.render('checkbox'); //刷新checkbox选择框渲染
                    }
                });
                // 获取表格勾选状态,全选中时设置全选框选中

              

                //重载翻页事件
                $('.layui-laypage-default a[data-page],.layui-laypage-btn').unbind('click').bind('click', function () {                 
                    if ($(this).hasClass('layui-disabled')) {
                        return;
                    }
                    refreshCheckBox();
                });
                $('.layui-laypage-limits select').unbind('change').bind('change', function () {                   
                    refreshCheckBox();
                });
                setTimeout(function () {
                    $('.layui-table-cell').attr('title', function () {//单元格鼠标放上去显示单元中文字内容
                        return this.innerText;
                    })
                });

            }

 

 table.on('checkbox(MyTable)', function (obj) {
            if (obj.checked == true) {
                if (obj.type == 'one') {
                    ids.push(obj.data.nodecode);
                } else {
                    ids = currentData.map(function (value) {
                        return value.nodecode;
                    });                   
                }
            } else {
                if (obj.type == 'one') {
                    let i = ids.length;
                    while (i--) {
                        if (ids[i] == obj.data.nodecode) {
                            ids.splice(i, 1);
                        }
                    }
                } else {
                    ids = [];                  
                }
            }

            refreshCheckBox();
        });

 

var refreshCheckBox = function () {
        var c = $('.layui-table-header th[data-field="0"] input[type="checkbox"]');
        if (ids.length == currentData.length && currentData.length && currentData.length > 0) {
            c.prop('checked', true);
          
        } else {
            c.prop('checked', false);
        }
        form.render('checkbox'); //刷新checkbox选择框渲染
    }