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

Posted 2021-12-15 Bug终结者.

基于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);

完美实现批量删除功能

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

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

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

感谢支持~