删除选中功能_代码实现_删除选中服务器代码编写与删除选中功能_代码实现_删除选中细节处理
删除选中功能_代码实现_删除选中服务器代码编写
package hf.xueqiang.web.servlet; import hf.xueqiang.service.UserService; import hf.xueqiang.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("uid"); //2.调用service删除 UserService service = new UserServiceImpl(); service.delSelectedUser(ids); //3.跳转查询所有Servlet response.sendRedirect(request.getContextPath()+"/userListServlet"); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } }
没有删除之前：
已经选好了：
删除之后:
删除选中功能_代码实现_删除选中细节处理
处理全选和取消全选：
//1.获取第一个cb document.getElementById("firstCb").onclick = function(){ //2.获取下边列表中所有的cb var cbs = document.getElementsByName("uid"); //3.遍历 for (var i = 0; i < cbs.length; i++) { //4.设置这些cbs[i]的checked状态 = firstCb.checked cbs[i].checked = this.checked; } } } </script> </head> <body> <div class="container"> <h3 style="text-align: center">用户信息列表</h3> <div style="float: left"> <form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">姓名</label> <input type="text" class="form-control" id="exampleInputName2" > </div> <div class="form-group"> <label for="exampleInputEmail2">籍贯</label> <input type="email" class="form-control" id="exampleInputEmail1" > </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:5px"> <a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">添加联系人</a> <a class="btn btn-primary" href="javascript:void(0);" id="delSelected">删除选中</a> </div> <form id="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="firstCb"></th> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>籍贯</th> <th>QQ</th> <th>邮箱</th> <th>操作</th> </tr>
没有全选：
选择全选：
取消全选
取消全选：
批量删除提醒：
window.onload = function(){ //给删除选中按钮添加单击事件 document.getElementById("delSelected").onclick = function(){ if(confirm("您确定要删除选中条目吗？")){ var flag = false; //判断是否有选中条目 var cbs = document.getElementsByName("uid"); for (var i = 0; i < cbs.length; i++) { if(cbs[i].checked){ //有一个条目选中了 flag = true; break; } } if(flag){//有条目被选中 //表单提交 document.getElementById("form").submit(); }
已经全选了：
删除成功：
package hf.xueqiang.web.servlet;
import hf.xueqiang.service.UserService;
import hf.xueqiang.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("uid");
//2.调用service删除
UserService service = new UserServiceImpl();
service.delSelectedUser(ids);
//3.跳转查询所有Servlet
response.sendRedirect(request.getContextPath()+"/userListServlet");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
