【layui】学习总结-批量删除功能_layui批量删除

Layui学习总结-批量删除功能

一、思路设计

该功能实现的核心代码如下：
就是获取所有选中的行的数据，遍历获取id值传给后端进行删除操作，获得返回结果之后重新渲染当前页面即可

 table.on('toolbar(table)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'delAll':
                        //定义数组存放批量删除的行的id
                        var listId = [];
                        //获得所有选中行的数据
                        var datas = checkStatus.data;
                        //进行遍历所有选中行数据，拿出每一行的id存储到数组中
                        $.each(datas, function (i, data) {
                            listId.push(data.id)
                        });
                   }
              });

 二、代码实现

        1、展示代码

头部工具栏

<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
 
        <button class="layui-btn layui-btn-sm" lay-event="addObj">添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delAll">批量删除</button>
    </div>
</script>

 HTML代码

<script>
    layui.use(['form', 'table', 'util', 'jquery', 'laydate','layer'], function (args) {
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var $ = layui.jquery;
        var lay