脚本宝典收集整理的这篇文章主要介绍了基于SSM+Jquery+ajax实现批量删除功能,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
基于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>
@ResponseBody
@PostMapping("/deleteChecked")
public void deleteChecked(@RequestParam("bookIdArr") String[] bookIdArr) {
tBookService.deleteChecked(bookIdArr);
}
完美实现批量删除功能
如果本文对您有帮助的话,不妨给博主(点赞,收藏,关注,评论)
遇到任何技术问题均可在评论区评论或私信我,一定解决到位!
遇到任何技术问题均可在评论区评论或私信我,一定解决到位!
感谢支持~
以上是脚本宝典为你收集整理的基于SSM+Jquery+ajax实现批量删除功能全部内容,希望文章能够帮你解决基于SSM+Jquery+ajax实现批量删除功能所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。