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,測試一下

成功!現在只剩下一條信息了

好了,功能基本上都做完了,下一次會再做一個分頁查找的功能。