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

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

完美实现批量删除功能

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

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

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

感谢支持~

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇

)">
下一篇>>