删除选中功能

QLBF11 · Nov 30, 2020 · 038c487 · 038c487
1 parent ca9c143
commit 038c487
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 31 deletions.
diff --git a/UserqueryInfo/src/cn/itcast/dao/UserDao.java b/UserqueryInfo/src/cn/itcast/dao/UserDao.java
@@ -20,7 +20,7 @@ public interface UserDao {
     //添加联系人
     void add(User user);
 
-    //删除一行
+    //根据id删除一行
     void delete(int id);
 
     //修改一行时，回显要用的

diff --git a/UserqueryInfo/src/cn/itcast/dao/impl/UserDaoImpl.java b/UserqueryInfo/src/cn/itcast/dao/impl/UserDaoImpl.java
@@ -64,7 +64,7 @@ public void add(User user) {
 
     @Override
     public void delete(int id) {
-        //删除一行
+        //根据删除一行
         String sql="delete from user where id=?";
         template.update(sql,id);
     }

diff --git a/UserqueryInfo/src/cn/itcast/service/UserService.java b/UserqueryInfo/src/cn/itcast/service/UserService.java
@@ -45,4 +45,7 @@ public interface UserService {
 
     //修改一行时，提交时用
     void updateUser(User user);
+
+    //删除选中
+    void delSelectedUser(String[] ids);
 }
diff --git a/UserqueryInfo/src/cn/itcast/service/impl/UserServiceImpl.java b/UserqueryInfo/src/cn/itcast/service/impl/UserServiceImpl.java
@@ -66,6 +66,25 @@ public void updateUser(User user) {
         dao.update(user);
     }
 
+    @Override
+    public void delSelectedUser(String[] ids) {
+        /**
+         * @description: 删除选中
+         * @param: * @param: ids
+         * @return: void
+         * @author QLBF
+         * @date: 2020/11/30 8:49
+         */
+        //防止空指针异常
+        if (ids!=null&&ids.length>0){
+            //遍历数组
+            for (String id : ids) {
+                //调用dao的删除方法
+                dao.delete(Integer.parseInt(id));
+            }
+        }
+    }
+
     /*public static void main(String[] args) {
         User u=new User();
         u.setUsername("zhangsan1");

diff --git a/UserqueryInfo/src/cn/itcast/servlet/DelSelectedServlet.java b/UserqueryInfo/src/cn/itcast/servlet/DelSelectedServlet.java
@@ -0,0 +1,34 @@
+package cn.itcast.servlet;
+
+import cn.itcast.service.UserService;
+import cn.itcast.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;
+
+/**
+ * @author QLBF
+ * @version 1.0
+ * @date 2020/11/29 22:46
+ */
+@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);
+    }
+}
diff --git a/UserqueryInfo/web/list.jsp b/UserqueryInfo/web/list.jsp
@@ -40,6 +40,42 @@
                 location.href="${pageContext.request.contextPath}/delUserServlet?id="+id;
             }
         }
+
+        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){
+                        //有条目被选中
+                        //表单提交,下面的form是form设置的id值
+                        document.getElementById("form").submit();
+                    }
+                }
+            }
+
+            //1.获取第一个cb，全选全不选的操作
+            document.getElementById("firstCb").onclick=function () {
+                //2.获取下边列表中所有的cb，这里要用getElementsByName
+                var cbs = document.getElementsByName("uid");
+                //遍历
+                for (var i=0;i<cbs.length;i++){
+                    //4.设置这些cbs[i]的checked状态 = firstCb.checked
+                    cbs[i].checked=this.checked;
+                }
+            }
+
+        }
     </script>
 </head>
 
@@ -67,43 +103,51 @@
 
     <div style="float: right;margin: 5px">
         <a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">添加联系人</a>
-        <a class="btn btn-primary" href="">删除选中</a>
+<%--
+        上面定义一个方法来获取delSelected这个来成了一个方法再获取下面的表单
+--%>
+        <a class="btn btn-primary" href="javascript:void(0);" id="delSelected">删除选中</a>
     </div>
-    <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>
 
-        <%--通过el表达式来获取servlet传给它的集合--%>
-        <c:forEach items="${users}" var="user" varStatus="s">
-            <tr>
-                <th><input type="checkbox" id="uid"></th>
-                <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>&nbsp;
 <%--
-                    为每一行提供删除功能,deleteUser是上面定义的方法
+    添加一个表单来提交删除选中的复选框的id，设置id为form给上面函数来获取这个表单
 --%>
-                    <a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">删除</a></td>
+    <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>
 
-        </c:forEach>
+            <%--通过el表达式来获取servlet传给它的集合--%>
+            <c:forEach items="${users}" var="user" varStatus="s">
+                <tr>
+                    <th><input type="checkbox" name="uid" value="${user.id}"></th>
+                    <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>&nbsp;
+    <%--
+                        为每一行提供删除功能,deleteUser是上面定义的方法
+    --%>
+                        <a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">删除</a></td>
+                </tr>
 
-    </table>
+            </c:forEach>
 
+        </table>
+    </form>
     <div>
         <nav aria-label="Page navigation">
             <ul class="pagination">