序
效果演示
- 全选和反选
- 批量删除(删除11、12条记录)
正文
(一)全选和反选
- 引入样式文件:
js下载
1.前端
- 一个
全部删除按钮
:`id =“deleteButton” - 表头
全选|全不选
的check框:input id=“check_all” type=“checkbox” - 每行数据前一个
check框
:input type=“checkbox” name =“idChecked” value="${t.id }"
<button class="btn btn-danger" id="deleteButton">全部删除</button>
<!--显示表格数据-->
<table class="table table-hover">
<tr>
<th><input id="check_all" type="checkbox"/>全选|全不选</th>
</tr>
<c:forEach items="${pageInfo.list}" var="t">
<tr>
<td><input type="checkbox" name ="idChecked" value="${t.id }"/></td>
<td>
<button class="btn btn-primary"> 编辑</button>
<button class="btn btn-danger" id="delBtn">删除
</button>
</td>
</tr>
</c:forEach>
</table>
deleteNews.js:
//全选
$("#check_all").click(function () {
$("[name=idChecked]").prop("checked",$(this).prop("checked")); //实现全选/全不选
});
$("[name=idChecked]").click(function () { //实现反选,单个
var s = $("[name=idChecked]");
if(this.checked){
for(i=0;i<s.length;i++){
if(s[i].checked != true){
return;
}
}
$("#check_all").prop("checked",true);
}else{
$("#check_all").prop("checked",this.checked);
}
});
//批量删除(调用了layui和MLoading.js)
//获取选中的id号,组成一个集合checkedList.toString()
//重命名集合为delitems,并用ajax向后端传值
$("#deleteButton").on("click", function() {
//判断至少写了一项
var checkedNum = $("input[name='idChecked']:checked").length;
if (checkedNum == 0) {
layer.alert("请至少选择一项!");
return false;
}
var checkedList = new Array();
$("input[name='idChecked']:checked").each(function() {
checkedList.push($(this).val());
});
layer.confirm(checkedList+'\n确定删除所选项目?', {
title : '提示'
}, function() {
$("body").mLoading('show'); //加遮罩
$.ajax({
type : "POST",
url : 'http://localhost:8080/helloworld_war_exploded/batchDeletes',
data : {
"delitems" : checkedList.toString()
},
datatype : "html",
success : function(data) {
$(":checkbox").attr("idChecked", false);
layer.close();
window.location.reload();
},
error : function(data) {
layer.alert("删除失败!");
}
});
});
})
test.jsp:完整代码:
<%--
Created by IntelliJ IDEA.
User: CUNGU
Date: 2019/7/31
Time: 12:44
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName()
+ ":" + request.getServerPort() + path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<link rel="stylesheet" media="screen" href="${pageContext.request.contextPath}/statics/bootstrap-dist/css/bootstrap3.min.css" >
<head>
<title>PageHelper分页测试</title>
</head>
<body>
<!--通过bootstrap的栅格系统布局-->
<div class="container">
<!--标题-->
<div class="row">
<div class="col-md-12">
<h1>分页测试</h1>
SSM-Mybatis的插件 PageHelper
</div>
</div>
<!--按钮, 图标参考https://www.runoob.com/bootstrap/bootstrap-glyphicons.html-->
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增</button>
<button class="btn btn-danger" id="deleteButton"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除</button>
<button class="btn btn-success"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span><a href="${pageContext.request.contextPath}/news"></a>刷新</button>
</div>
</div>
<!--显示表格数据-->
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<tr>
<th><input id="check_all" type="checkbox"/>全选|全不选</th>
<th>#</th>
<th>title</th>
<th>typeid</th>
<th>time</th>
<th>author</th>
<th>操作</th>
</tr>
<c:forEach items="${pageInfo.list}" var="t">
<tr>
<td><input type="checkbox" name ="idChecked" value="${t.id }"/></td>
<td><c:out value="${t.id}"/></td>
<td><c:out value="${t.title}"/></td>
<td><c:out value="${t.typeid}"/></td>
<td><c:out value="${t.time}"/></td>
<td><c:out value="${t.author}"/></td>
<td>
<button class="btn btn-primary">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
编辑
</button>
<button class="btn btn-danger" id="delBtn">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
删除
</button>
</td>
</tr>
</c:forEach>
</table>
</div>
</div>
<!--显示分页信息-->
<div class="row">
<!--文字信息-->
<div class="col-md-6">
当前第 ${pageInfo.pageNum} 页.总共 ${pageInfo.pages} 页.一共 ${pageInfo.total} 条记录
</div>
<!--点击分页-->
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="${pageContext.request.contextPath}/news?pn=1">首页</a></li>
<!--上一页-->
<li>
<c:if test="${pageInfo.hasPreviousPage}">
<a href="${pageContext.request.contextPath}/news?pn=${pageInfo.pageNum-1}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</c:if>
</li>
<!--循环遍历连续显示的页面,若是当前页就高亮显示,并且没有链接-->
<c:forEach items="${pageInfo.navigatepageNums}" var="page_num">
<c:if test="${page_num == pageInfo.pageNum}">
<li class="active"><a href="#">${page_num}</a></li>
</c:if>
<c:if test="${page_num != pageInfo.pageNum}">
<li><a href="${pageContext.request.contextPath}/news?pn=${page_num}">${page_num}</a></li>
</c:if>
</c:forEach>
<!--下一页-->
<li>
<c:if test="${pageInfo.hasNextPage}">
<a href="${pageContext.request.contextPath}/news?pn=${pageInfo.pageNum+1}"
aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</c:if>
</li>
<li><a href="${pageContext.request.contextPath}/news?pn=${pageInfo.pages}">尾页</a></li>
</ul>
</nav>
</div>
</div>
</div>
<script src="${pageContext.request.contextPath}/statics/bootstrap-dist/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/bootstrap-dist/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/layui-dist/layui.js"></script>
<script src="${pageContext.request.contextPath}/statics/layui-dist/layui.all.js"></script>
<script src="${pageContext.request.contextPath}/statics/jquery-mloading-dist/jquery.mloading.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/bootstrap-dist/js/bootstrap-paginator.js"></script>
<script src="${pageContext.request.contextPath}/statics/mystyle/js/deleteNews.js"></script>
</body>
</html>
(二)批量删除
- 原理:
<!--批量删除 foreach元素的属性主要有 item,index,collection,open,separator,close。 item表示集合中每一个元素进行迭代时的别名. (直接找到对应的delList集合里面的所有元素,item="item"中的item(后一个)必须与#{item} 中的item一致) index指 定一个名字,用于表示在迭代过程中,每次迭代到的位置. open表示该语句以什么开始,separator表示在每次进行迭代之间以什么符号作为分隔符. close表示以什么结束. --> <delete id="batchDeletes" parameterType="java.util.List"> DELETE FROM news where `id` in <foreach collection="list" index="index" item="id" open="(" separator="," close=")"> #{id} </foreach> </delete>
Mybatis实现批量删除操作原理:
https://blog.csdn.net/javaee_sunny/article/details/52511842
https://blog.csdn.net/qq_33229669/article/details/85015926
https://blog.csdn.net/happyboy214117/article/details/47753489
sql语句测试:
1.前端
在前面多选的基础上:
- 获取选中的id号,组成一个集合checkedList.toString()
- 重命名集合为delitems,并用ajax向后端传值
(js代码在上述分页代码中,不重复)
2.后端
controller
/**
*批量删除 batch
* 从前台勾选的选择框中传过来的值用“,”分开,然后遍历存放到delList集合里面,直接删delList集合里面的所有字符串。
*/
@RequestMapping("/batchDeletes")
@ResponseBody
public void batchDeletes(HttpServletRequest request, HttpServletResponse response){
String items = request.getParameter("delitems");
System.out.println("前端请求删除的内容是"+items);
List<Integer> delList = new ArrayList<Integer>();
String[] strs = items.split(",");
for (String id : strs) {
delList.add(Integer.parseInt(id));//因为后端为int型
}
newsService.batchDeletes(delList);
System.out.println("删除内容:"+delList+"\n删除成功!");
}
运行效果:
service:
/**
* 批量删除
*/
void batchDeletes(List<Integer> delList);
serviceImpl:
/**
* 批量删除
*/
@Override
public void batchDeletes(List<Integer> delList) {
newsMapper.batchDeletes(delList);
}
mapper.java
//单个删除
int deleteByPrimaryKey(Integer id);
//批量删除
void batchDeletes(List<Integer> delList);
mybatis
<!--单个删除-->
<delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >
delete from news
where id = #{id,jdbcType=INTEGER}
</delete>
<!--批量删除
foreach元素的属性主要有 item,index,collection,open,separator,close。
item表示集合中每一个元素进行迭代时的别名. (直接找到对应的delList集合里面的所有元素,item="item"中的item(后一个)必须与#{item} 中的item一致)
index指 定一个名字,用于表示在迭代过程中,每次迭代到的位置.
open表示该语句以什么开始,separator表示在每次进行迭代之间以什么符号作为分隔符.
close表示以什么结束.
-->
<delete id="batchDeletes" parameterType="java.util.List">
DELETE FROM news where id in
<foreach collection="list" index="index" item="id" open="(" separator="," close=")">
#{id}
</foreach>
</delete>
(三)遇到的问题及解决办法
问题解决:
问题1:org.apache.catalina.core.StandardContext.listenerStart Error configuring application listener of class [org.springframework.web.context.ContextLoaderListener]
解决办法:
- tomcat启动报错说
org.springframework.web.context.ContextLoaderListener
错,
位置在web.xml中注意修改,我这里是title错了
listenerStart Error
报错:首先IDEA中 pom.xml 要确定引入的servlet-api.jar
包
maven项目中注意图中我删除了这一句导致报错:
因为provided表明该包只在编译和测试的时候用,所以,当启动tomcat的时候,就不会冲突了,完整依赖如下:<scope>provided</scope>
问题2:
The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml
解决办法:
- pom.xml不能有这句话,不然编译时,找不到jar包
<scope>provided</scope>
- 还是之前的web.xml的头部修改出错: