LayUi展示并实现批量删除 提示：使用多选框checkbox进行勾选删除

文章目录

前言一、在表格渲染中添加头部导航栏二、头部添加工具栏1.toolbar2.设置单击事件，也可写为头部导航栏事件 题外话

---

前言

LayUi展示并实现批量删除

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、在表格渲染中添加头部导航栏

代码如下（示例）：

<!-- 头部工具栏 --> <script type="text/html" id="toolbarDemo1"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="add">添加商品</button> <button class="layui-btn layui-btn-sm" id="delBtn" data-type="reload">批量删除</button> </div> </script>

二、头部添加工具栏

1.toolbar

代码如下（示例）：

table.render({ elem: '#demo' //指定原始表格元素选择器（推荐id选择器） ,url:'ProductServlet?method=getAllList' ,page: true //开启分页 ,id:'idTest' ,toolbar:'#toolbarDemo1'

2.设置单击事件，也可写为头部导航栏事件

代码如下（示例）：

$("#delBtn").click(function(){ var checkStatus = table.checkStatus('idTest');//获取选中的数据 var ids = []; for(var i=0;i<checkStatus.data.length;i++){ ids.push(checkStatus.data[i].id); } var id = ids.join(","); //通过ajax向后台提交删除请求 $.post("ProductServlet?method=delList",{"ids":id}, function(res){ layer.msg(res.msg) table.reload('idTest', {}) },"json"); });

该处使用的url是代码中的请求地址。

---

题外话

因为我们那时候还没有学习MyBatis，所以dao的实现层还没有被替换。**