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

最新推荐文章于 2023-12-04 21:07:04 发布

&蚂蚁

最新推荐文章于 2023-12-04 21:07:04 发布

阅读量2.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： layui

本文链接：https://blog.youkuaiyun.com/Luck_And_Destiny/article/details/119798498

本文总结了使用layui实现批量删除功能的思路和代码实现。核心思路是获取选中行的id，传给后端执行删除操作，然后刷新页面显示更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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