删除选中
1. 给删除选中按钮添加一个href属性，并且指向本地方法，写为"javascript:void(0);"
2. 在方法中先获取这个按钮的onclick事件
3. 在onclick事件中添加函数，函数中获取id值为checked的复选框，返回一个数组cbs
4. 定义一个flag，默认值为false，遍历cbs，判断如果cbs[i].checked为真，那么说明有复选框被选中，那么令flag=true
5. 如果flag为真，那么获取表单的id值，执行其submit()事件
6. 表单的 action="${pageContext.request.contextPath}/delSelectedServlet"
7. 写一个DelSelectedServlet，在其中获取id属性值为 checked，返回值为一个String类型的数组，将这个数组传给UserService中的delSelectedUser(ids)，ids为上面提到的String类型的数组
8. 在这个方法中多次执行上一次文章中提到的dao层的删除单个记录的方法，首先应该判断，ids!=null&&ids.length>0 为真，如果为真，才能执行上面的方法
代码实现
<div style="float:right;margin:5px">
<a class="btn btn-primary" href="javascript:void(0);" id="delSelected">删除选中</a>
</div>
<form id="delSelected_form" action="${pageContext.request.contextPath}/delSelectedServlet" method="post">
<table border="1" class="table table-bordered table-hover">
<tr class="success">
<th><input type="checkbox" id="firstCheckBox"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>QQ</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<c:forEach items="${pb.list}" var="user" varStatus="s">
<tr>
<td><input type="checkbox" name="checked" value="${user.id}"></td>
<td>${s.count}</td>
<td>${user.name}</td>
<td>${user.gender}</td>
<td>${user.age}</td>
<td>${user.address}</td>
<td>${user.qq}</td>
<td>${user.email}</td>
<td><a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/findUserServlet?id=${user.id}">修改</a>
<a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">删除</a></td>
</tr>
</c:forEach>
</table>
</form>在js代码里面添加onclick事件
window.onload=function () {
//给删除选中按钮添加单击事件
document.getElementById("delSelected").onclick=function () {
if (confirm("您确定要删除选中条目吗？")){
var flag=false;
//判断有选中条目
var cbs=document.getElementsByName("checked");
for (var i = 0; i <cbs.length ; i++) {
if(cbs[i].checked){
flag=true;
break;
}
}
if (flag){
//有条目被选中
//表单提交
document.getElementById("delSelected_form").submit();
}
}
}
</script>DelSelectedServlet
package zr.web.userlist.web.Servlet;
import zr.web.userlist.service.UserService;
import zr.web.userlist.service.impl.UserServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/delSelectedServlet")
public class DelSelectedServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 获取所有的id值
String[] ids = request.getParameterValues("checked");
//2. 盗用service删除
UserService service=new UserServiceImpl();
service.delSelectedUser(ids);
//3. 跳转查询所有Servlet
response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}service层
接口
/**
* 批量删除用户
* @param ids
*/
void delSelectedUser(String[] ids);
实现类
@Override
public void delSelectedUser(String[] ids) {
if (ids!=null&&ids.length>0){
//1. 遍历数组
for (String id : ids) {
//2. 调用dao删除
dao.delete(Integer.parseInt(id));
}
}
}delete方法见上一次博客中写的delete方法
这里面应该注意要在选中复选框之后，点击删除选中之后，需要弹出来一个确认提示框，“您确定你要删除选中的条目吗？”，只有用户点击了确定才能继续删除选中，如果点击了取消，那么不会执行任何步骤
添加联系人
1. 写一个add.jsp页面，在这个页面中，写一个form表单，列一些输入框和选择框，最下面添加三个按钮，分别为 提交，重置，返回三个
2. 这个页面需要给form表单添加action属性值 ${pageContext.request.contextPath}/addUserServlet ，提交按钮类型设置为submit类型，重置按钮设置为reset类型，返回按钮设置为
<a class="btn btn-default" href="${pageContext.request.contextPath}/findUserByPageServlet">返回</a>
3. 添加一个AddUserServlet，首先获取request的编码类型为utf-8 ，防止了乱码，获取提交表单的Map键值对集合，返回为map
4. 将map封装为User的对象user
5. 调用UserService对象service的addUser()方法，将user作为其参数
6. service层的addUser方法，用来调用dao层的add方法向数据库的表添加一条数据
7. dao层的add方法 执行sql语句 insert into user values(null,?,?,?,?,?,?,null,null) ，然后根据传给add的参数user对象，来添加各自参数
8. 最后直接跳转到FindUserByPageServlet
代码实现
add.jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- HTML5文档-->
<!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">
<link href="css/add.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>
<script src="js/表单验证.js"></script>
</head>
<body>
<div class="container">
<center><h3>添加联系人页面</h3></center>
<form action="${pageContext.request.contextPath}/addUserServlet" method="post" id="form">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
</div>
<div class="form-group">
<label>性别：</label>
<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
</div>
<div class="form-group">
<label for="age">年龄：</label>
<input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄">
<span id="s_age" class="error"></span>
</div>
<div class="form-group">
<label for="address">籍贯：</label>
<select name="address" class="form-control" id="address">
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="湖南">湖南</option>
</select>
</div>
<div class="form-group">
<label for="qq">QQ：</label>
<input type="text" class="form-control" id="qq" name="qq" placeholder="请输入QQ号码"/>
<span id="s_qq" class="error"></span>
</div>
<div class="form-group">
<label for="email">Email：</label>
<input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱地址"/>
<span id="s_email" class="error"></span>
</div>
<div class="form-group" style="text-align: center">
<input class="btn btn-primary" type="submit" value="提交" />
<input class="btn btn-default" type="reset" value="重置" />
<a class="btn btn-default" href="${pageContext.request.contextPath}/findUserByPageServlet">返回</a>
</div>
</form>
</div>
</body>
</html>然后写AddUserServlet
package zr.web.userlist.web.Servlet;
import org.apache.commons.beanutils.BeanUtils;
import zr.web.userlist.domain.User;
import zr.web.userlist.service.UserService;
import zr.web.userlist.service.impl.UserServiceImpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;
@WebServlet("/addUserServlet")
public class AddUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 设置编码
request.setCharacterEncoding("utf-8");
//2. 获取参数
Map<String, String[]> map = request.getParameterMap();
//3. 封装对象
User user=new User();
try {
BeanUtils.populate(user,map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//4. 调用Service保存
UserService service=new UserServiceImpl();
service.addUser(user);
//5. 直接跳转到FindUserByPageServlet
response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
service层
接口
/**
* 添加一个user
* @param user
*/
void addUser(User user);实现方法
@Override
public void addUser(User user) {
//1. 调用dao中的add方法，向数据库中添加一条数据
dao.add(user);
}dao层
接口
/**
* 向数据库中添加一条数据
* @param user
*/
void add(User user);实现
@Override
public void add(User user) {
// 1. 定义sql语句
String sql="insert into user values(null,?,?,?,?,?,?,null,null)";
//2. 执行sql
template.update(sql,user.getName(),user.getGender(),user.getAge(),user.getAddress(),user.getQq(),user.getEmail());
}全选按钮
1. 第一个checkbox的id命名为 firstCheckBox
2. 后面的checkbox命名为checked
3. 分别获取上面这两个id值，第一个id获取后获取其单击事件
4. 第二个id获取的为一个数组
5. 在单击事件函数中，使得后面每一个checkbox状态与第一个checkbox状态一样‘’
js代码如下
//1. 获取第一个cb
document.getElementById("firstCheckBox").onclick=function () {
//2. 获取下边列表中所有的cb
var cbs=document.getElementsByName("checked");
//3. 遍历
for (var i = 0; i <cbs.length ; i++) {
//4. 设置这些cbs[i]的checked状态=firstCheckBox.checked
cbs[i].checked=this.checked;
}
}
}
扫一扫
4118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
