LayUi展示并实现批量删除

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

---

前言

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的实现层还没有被替换。**