基于SSM+Jquery实现批量删除功能

简介

基于SSM项目+Jquery实现数据的批量删除，批量删除数据记录，以及一键多选，反选，从而实现批量删除

效果图

Jquery发送ajax请求，进行删除操作

前端代码实现

//删除选中的记录
<input type="button" class="btn btn-primary" id="delSelected" value="删除选中">
//一键多选以及取消多选按钮
<th><input type="checkbox" id="firstCb"></th>
//选中某条记录
<td ><input type="checkbox" name="book_ids" value="${book.book_id}"></td>

//引入jquery文件
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(function () {
        var bookIdsArr = [];
        var bookIds = document.getElementsByName("book_ids");
        /**
         * 一键多选及取消选中
         */
        $("#firstCb").click(function () {
            for (let i = 0; i < bookIds.length; i++) {
                if (!bookIds[i].checked) {
                    bookIds[i].checked = true;
                    bookIdsArr.push(bookIds[i].value);
                } else {
                    bookIds[i].checked = false;
                    bookIdsArr = [];
                }
            }
        })


        /**
         * 删除选中的记录
         */
        $("#delSelected").click(function () {
            bookIdsArr = [];
            for (let i = 0; i < bookIds.length; i++) {
                if (bookIds[i].checked) {
                    bookIdsArr.push(bookIds[i].value);
                }
            }

            /**
             * 发送ajax请求，将选中的记录数拼成数组传递给后端
             */
            $.ajax({
                url:"${APP_PATH}/book/deleteChecked",
                data: {"bookIdArr":bookIdsArr},
                type: "POST",
                traditional:true,//防止深度序列化
                success () {
                    //重定向到列表页
                    window.location.href = "${APP_PATH}/book/page";
                }
            })
        })

    })
</script>

后端接收ajax请求

@ResponseBody
@PostMapping("/deleteChecked")
public void deleteChecked(@RequestParam("bookIdArr") String[] bookIdArr) {
    tBookService.deleteChecked(bookIdArr);
}

完美实现批量删除功能

如果本文对您有帮助的话，不妨给博主（==点赞，收藏，关注，评论==）

遇到任何技术问题均可在评论区评论或私信我，一定解决到位！

遇到任何技术问题均可在评论区评论或私信我，一定解决到位！

感谢支持~