LayUI + js实现全选、多选、翻页勾选（LayUI数据表格 方法渲染 模式）

var pageDataIdMap;
var idMap = new Map();

先定义一个用来存放 每一页 的 所有数据行 ID 的map集合  --> pageDataIdMap

再创建一个用来存放 我们勾选的数据行 ID 的map集合  -->  idMap

 

layui.use(['layer', 'jquery', 'table'], function() {
    table.render({
        page: { 
        },
        done: function (res, curr, count) {
            pageDataIdMap = new Map();
            for(var i = 0;i < len;i++){   //填充当前页的数据
                pageDataIdMap[res.data[i].id] = res.data[i].id;
            }
        },
        cols: colArr
    });
});

渲染每一页的数据行时，在 done 中将这一页的所有数据行 ID 保存到 pageDataIdMap 中。

 

<div style="padding: 10px;">
    <table class="layui-hide layui-table" id="jzqyListTable" lay-size="sm" lay-filter="demo">
    </table>
</div>

table.on('checkbox(demo)', function(obj){
    if(obj.type == 'one'){    //单选操作
        if(obj.checked){     //选中
            idMap[obj.data.id] = obj.data.id;
        }else{      //取消选中
            for(var key in idMap){
                if(key == obj.data.id){   //移除取消选中的id
                    delete idMap[obj.data.id];
                }
            }
         }
    }else{      //全选操作
         if(obj.checked){    //选中
             for(var pageKey in pageDataIdMap){
                 idMap[pageKey] = pageKey;
             }
         }else{     //取消选中
             for(var pageKey in pageDataIdMap){
                 for(var key in idMap){
                     if(key == pageKey){
                         delete idMap[pageKey];
                     }
                 }
             }
         }
    }
});                

这里使用LayUI的监听事件，来监听方法渲染的表格 数据 的勾选 --> table.on('checkbox(demo)', function(obj){}

单选  -->  obj.type = 'one'       全选  -->  obj.type = 'all'

选中  -->  obj.checked = true    未选中  -->  obj.checked = false

如果是单选时候的选中，就讲这个勾选的数据行 ID 存放到 idMap 中；如果是全选的选中，就遍历 pageDataIdMap，将其中的 ID 存放到 idMap 中。

如果是单选时候的取消选中，就遍历 idMap 将取消勾选的数据行 ID 从 idMap 中移除；如果是全选的取消选中，就遍历 idMap 和 pageDataIdMap，将 pageDataIdMap 中有的 ID 全部从 idMap 中移除。

 

layui.use(['layer', 'jquery', 'table'], function() {
    table.render({
        page: { 
        },
        done: function (res, curr, count) {
            var len = res.data.length;
            var chooseNum = 0;   //记录当前页选中的数据行数
            for(var i = 0;i < len;i++){   //勾选行回显
                for(var key in idMap){
                    if(res.data[i].id == key){
                        res.data[i]["LAY_CHECKED"]='true';
                        //找到对应数据改变勾选样式，呈现出选中效果
                        var index= res.data[i]['LAY_TABLE_INDEX'];
                        $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                        $('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                         chooseNum++;
                    }
                }
            }
            if(len != 0 && chooseNum == len){   //表示该页全选  --  全选按钮样式回显
                $('input[lay-filter="layTableAllChoose"]').prop('checked',true);
                $('input[lay-filter="layTableAllChoose"]').next().addClass('layui-form-checked');
            }
        },
        cols: colArr
    });
});

这里实现在翻页的时候，将已勾选的数据行样式回显，如果全选就将全选样式回显为选中状态。

在 done 中获取当前页的数据条数  -->  var len = res.data.length;

定义一个记录当前页回显为选中状态的数据行条数的记录数  -->  var chooseNum = 0;

for循环，循环 len 次，并遍历 idMap，如果当前页的 pageDataIdMap 中与 idMap 有相同 key 的数据，则回显为勾选状态

 

res.data[i]["LAY_CHECKED"]='true';
var index= res.data[i]['LAY_TABLE_INDEX'];
$('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
$('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');

并且 chooseNum 进行 +1 
当 chooseNum = len 并且 len ！= 0 时，表示当前页的数据都是选中状态，所以全选按钮也要回显为选中状态

$('input[lay-filter="layTableAllChoose"]').prop('checked',true);
$('input[lay-filter="layTableAllChoose"]').next().addClass('layui-form-checked');

到这里，多选、全选与翻页勾选就已经实现。
接下来就是点击按钮实现批量操作（我这边是 批量提交）

<div class="parentAdd demoTable">
    <a class="layui-btn layui-btn-normal layui-btn-xs" data-type="getCheckData" style="font-size: 14px; margin-top:6px;padding-top: 12px; height: 24px; width: 80px; line-height: 0px; vertical-align: top;">提交委托单
    </a>
</div>

layui.use(['layer', 'jquery', 'table'], function() {    
    var active = {
        getCheckData: function(){
            //你的JS方法
        }
    };
    $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
});

 

 

完整代码如下：

HTML代码：

<div class="table_mian" style="position: absolute;width: 100%;top: 124px;bottom: 0;left: 0;border: 1px solid #dedede;">
    <div class="bgtop">
        <a href="#" style="color: #4c4c4c;font-size: 15px;line-height: 36px;padding-left: 10px;"><i class="fa fa-table zt" style="padding-right: 6px;"></i>见证取样信息</a>
         <div class="parentAdd demoTable">
             <a class="layui-btn layui-btn-normal layui-btn-xs" data-type="getCheckData" style="font-size: 14px; margin-top:6px;padding-top: 12px; height: 24px; width: 80px; line-height: 0px; vertical-align: top;">提交委托单</a>
        </div>
    </div>
    <div style="padding: 10px;">
         <table class="layui-hide layui-table" id="jzqyListTable" lay-size="sm" lay-filter="demo"></table>
    </div>
</div>

JS代码：

var pageDataIdMap;
var idMap = new Map();

$(function() {
    layui.use(['layer', 'jquery', 'table'], function() {
        table.render({
            page: {},
            done: function (res, curr, count) {
                var len = res.data.length;
                pageDataIdMap = new Map();
                for(var i = 0;i < len;i++){   //填充当前页的数据
                    pageDataIdMap[res.data[i].id] = res.data[i].id;
                }
                var chooseNum = 0;   //记录当前页选中的数据行数
                for(var i = 0;i < len;i++){   //勾选行回显
                    for(var key in idMap){
                        if(res.data[i].id == key){
                            res.data[i]["LAY_CHECKED"]='true';
                            //找到对应数据改变勾选样式，呈现出选中效果
                            var index= res.data[i]['LAY_TABLE_INDEX'];
                            $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                            $('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                            chooseNum++;
                        }
                    }
                }
                if(len != 0 && chooseNum == len){   //表示该页全选  --  全选按钮样式回显
                $('input[lay-filter="layTableAllChoose"]').prop('checked',true);
                $('input[lay-filter="layTableAllChoose"]').next().addClass('layui-form-checked');
                }
            },
            cols: colArr
        });

        table.on('checkbox(demo)', function(obj){
            if(obj.type == 'one'){    //单选操作
                if(obj.checked){     //选中
                    idMap[obj.data.id] = obj.data.id;
                }else{      //取消选中
                    for(var key in idMap){
                        if(key == obj.data.id){   //移除取消选中的id
                            delete idMap[obj.data.id];
                        }
                    }
                }
            }else{      //全选操作
                if(obj.checked){    //选中
                    for(var pageKey in pageDataIdMap){
                        idMap[pageKey] = pageKey;
                    }
                }else{     //取消选中
                    for(var pageKey in pageDataIdMap){
                        for(var key in idMap){
                            if(key == pageKey){
                                delete idMap[pageKey];
                            }
                        }
                    }
                }
            }
        });

        var active = {
            getCheckData: function(){
                batchSubmitWt();
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
         });

    });
});

function batchSubmitWt() {
    var ids = "";
    for(var key in idMap){
        ids += key + ",";
    }
    if(ids == ''){
        layer.open({title:'提示',content:'请勾选要提交的委托单'});
        return false;
    }
    ids = ids.slice(0,-1);
    $.ajax({
        type : "POST",
        url : '../jzqy/batchSubmitWt',
        data : {
            'id' : ids
        },
        dataType : "json",
        success: function (data) {
            if(data.status == 'success'){
                table.reload('jzqyListTable', {
                    where: {},
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        }
    });
}