JavaWeb学生管理系统（3）

上一次已经做好了添加学生、修改信息和删除学生的功能，今天做一下删除选中学生的功能。

首先要解决checkbox的选中问题。

 选中最上面的，要让所有条目都被选中。

为下面的checkbox添加name属性，为最上面的checkbox添加id属性，方便script代码能够找到这些对象。

        <tr>
            <th><input type="checkbox" id="allcheckbox"></th>
            <th>学号</th>
            <th>姓名</th>
            <th>班级</th>
            <th>专业</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>

            <tr>
                <td><input type="checkbox" name="studentcheckbox"></td>
                <td>${student.studentNo}</td>
                <td>${student.name}</td>
                <td>${student.classNo}</td>
                <td>${student.major}</td>
                <td>${student.gender == 1 ? "男" : "女"}</td>
                <td>${student.age}</td>
                <td>
                    <button class="btn btn-success" onclick="window.location.href='${pageContext.request.contextPath}/findStudentServlet?studentno=${student.studentNo}'">修改</button>
                    <button class="btn btn-danger" onclick="window.location.href='${pageContext.request.contextPath}/deleteStudentServlet?studentno=${student.studentNo}'">删除</button>
                </td>
            </tr>

现在写script代码

    <script>
        window.onload = function () {
            var allcheckbox = document.getElementById("allcheckbox");
            var studentcheckboxs = document.getElementsByName("studentcheckbox");

            var count = 0; //记录被选中的checkbox数量
            allcheckbox.onclick = function () {
                if (allcheckbox.checked) {
                    count = studentcheckboxs.length; //全选，count与studentcheckboxs数量相同
                    for (let i = 0; i < studentcheckboxs.length; i++) {
                        studentcheckboxs[i].checked = true;
                    }
                } else {
                    count = 0; //全不选，count为0
                    for (let i = 0; i < studentcheckboxs.length; i++) {
                        studentcheckboxs[i].checked = false;
                    }
                }
            };

            for (let i = 0; i < studentcheckboxs.length; i++) {
                studentcheckboxs[i].onclick = function () {
                    if (studentcheckboxs[i].checked == true) {
                        count++; //每选中一个，count加一
                    } else {
                        count--; //每取消选中一个，count减一
                    }
                    //如果count数量与studentboxs数量相同，则令allcheckbox变为选中状态
                    allcheckbox.checked = count == studentcheckboxs.length;
                }
            }
        }
    </script>

现在可以十分方便的进行全选操作

接下来为了实现删除选中条目的操作，需要将所有选中条目的学号作为参数发送到一个servlet去处理，这里可以使用表单将所有的studentno作为参数中的值发送到一个servlet

为每一条信息的checkbox添加value值，并在外面添加一个form表单标签

    <form action="${pageContext.request.contextPath}/deleteSelectedServlet" id="deleteSelectedform">
        <table class="table table-bordered table-striped table-hover">
            <tr>
                <th><input type="checkbox" id="allcheckbox"></th>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
                <th>专业</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>

            <c:forEach items="${requestScope.studentList}" var="student">
                <tr>
                    <td><input type="checkbox" name="studentcheckbox" value="${student.studentNo}"></td>
                    <td>${student.studentNo}</td>
                    <td>${student.name}</td>
                    <td>${student.classNo}</td>
                    <td>${student.major}</td>
                    <td>${student.gender == 1 ? "男" : "女"}</td>
                    <td>${student.age}</td>
                    <td>
                        <button class="btn btn-success" onclick="window.location.href='${pageContext.request.contextPath}/findStudentServlet?studentno=${student.studentNo}'">修改</button>
                        <button class="btn btn-danger" onclick="window.location.href='${pageContext.request.contextPath}/deleteStudentServlet?studentno=${student.studentNo}'">删除</button>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </form>

为删除按钮添加id属性，并为其onclick属性添加function对象

            var deleteSelected = document.getElementById("deleteSelected");
            deleteSelected.onclick = function () {
                var deleteSelectform = document.getElementById("deleteSelectedform");
                deleteSelectform.submit();
            }

OK，现在可以测试一下，选中几条信息，点击删除选中的按钮

 

看地址框，参数成功发送了。现在创建DeleteSelectedServlet类，用于处理删除选中条目的逻辑。

@WebServlet("/deleteSelectedServlet")
public class DeleteSelectedServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String[] studentNos = request.getParameterValues("studentcheckbox");

        StudentService studentService = new StudentServiceImpl();
        studentService.deleteSelectedStudent (studentNos);

        response.sendRedirect(request.getContextPath() + "/studentListServlet");
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

为StudentService添加新方法deleteSelectedStudent (String studentNos);

不过不需要在为StudentDao添加新方法了，因为DAO层是处理最基本的增删改查操作的，Service层需要灵活的使用这些方法。

    @Override
    public void deleteSelectedStudent(String[] studentNos) {
        for (String studentNo : studentNos) {
            dao.deleteStudentByStudentNo(studentNo);
        }
    }

现在重启Tomcat，测试一下

成功！现在只剩下一条信息了

好了，功能基本上都做完了，下一次会再做一个分页查找的功能。