多选删除功能
一、流程分析
二、前端页面(list.jsp)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
<!-- 指定字符集 -->
<meta charset="utf-8">
<!-- 使用Edge最新的浏览器的渲染方式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport视口:网页可以根据设置的宽度自动进行适配,在浏览器的内部虚拟一个容器,容器的宽度与设备的宽度相同。
width: 默认宽度与设备的宽度相同
initial-scale: 初始的缩放比,为1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>用户信息管理系统</title>
<!-- 1. 导入CSS的全局样式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery导入,建议使用1.9以上的版本 -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. 导入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
td, th {
text-align: center;
}
</style>
<script>
//删除单条记录
function del(uid){
var result = confirm("您确定要删除吗?");
if(result){
window.location.href="${pageContext.request.contextPath}/DelUserServlet?id="+uid;
}
}
//删除选中的多条记录
function delSelected(){
var flag=false;
//判断有没有记录被选中
var ids = document.getElementsByName("ids");
for(var i=0; i<ids.length; i++){
if(ids[i].checked){
flag =true;
break;
}
}
if(flag){
var result= confirm("您确定要删除吗?");
if(result){
document.getElementById("form2").submit(); //javascript用于提交表单
}
}else{
alert("没有用户被选中");
}
}
window.onload=function(){
//为selectAll多选框添加事件
document.getElementById("selectall").onclick=function(){
var ids =document.getElementsByName("ids");
for(var i=0; i<ids.length; i++){
ids[i].checked = this.checked;
}
}
}
</script>
</head>
<body>
<div class="container">
<h3 style="text-align: center">用户信息列表</h3>
<div style="float:left;margin: 10px">
<form class="form-inline" id="form1">
<div class="form-group">
<label for="exampleInputName2">用户名</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group">
<label for="exampleInputaddress">籍贯</label>
<input type="email" class="form-control" id="exampleInputaddress" >
</div>
<div class="form-group">
<label for="exampleInputEmail2">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail2" >
</div>
<button type="submit" class="btn btn-default">查询</button>
</form>
</div>
<div style="float: right;margin: 10px">
<a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">添加联系人</a>
<a class="btn btn-primary" href="javascript:delSelected()">删除选中</a>
</div>
<form id="form2" action="${pageContext.request.contextPath}/DelSelectedServlet" method="post">
<table border="1" class="table table-bordered table-hover">
<tr class="success">
<th><input type="checkbox" id="selectall" /> </th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>QQ</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<c:forEach items="${list}" var="temp" >
<tr>
<td><input type="checkbox" name="ids" value="${temp.id}"/> </td>
<td>${temp.id}</td>
<td>${temp.name}</td>
<td>${temp.gender}</td>
<td>${temp.age}</td>
<td>${temp.address}</td>
<td>${temp.qq}</td>
<td>${temp.email}</td>
<td>
<a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/FindUserServlet?id=${temp.id}">修改</a>
<a class="btn btn-default btn-sm" href="javascript:del(${temp.id})" >删除</a></td>
</tr>
</c:forEach>
</table>
</form>
<div>
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<span style="font-size:25px;margin-left: 10px">共16条记录,共4页</span>
</ul>
</nav>
</div>
</div>
</body>
</html>
图片中截取的是几个需要修改的位置![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/86e73609c6d793825d76795a41cd76a7.png)
二、web层
添加DelSelectedServlet
@WebServlet(value = "/DelSelectedServlet")
public class DelSelectedServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收前台页面传过来的选中的id
String[] ids = request.getParameterValues("ids");
//调用业务层进行删除
UserService userService = new UserServiceImpl();
userService.deleteUsers(ids);
//重新查询用户信息
response.sendRedirect(request.getContextPath()+"/UserListServlet");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
三、Service层
UserService.java
/**
* 删除多个用户
*/
void deleteUsers(String[] ids);
UserServiceImpl.java
@Override
public void deleteUsers(String[] ids) {
if(ids!=null) {
for (String id : ids) {
userDao.delete(Integer.parseInt(id));
}
}
}
此篇完成了删除选中和全选全不选功能!