jquery ajax实现批量删除具体思路及代码

前端技术 2023/09/09 AJAX
js页面jquery代码：
复制代码 代码如下:

// JavaScript Document
$(document).ready(function() {
// 全选
$(\"#allChk\").click(function() {
$(\"input[name=\'subChk\']\").prop(\"checked\",this.checked);
});
// 单选
var subChk = $(\"input[name=\'subChk\']\")
subChk.click(function() {
$(\"#allChk\").prop(\"checked\", subChk.length == subChk.filter(\":checked\").length ? true:false);
});
/* 批量删除 */
$(\"#del_model\").click(function() {
// 判断是否至少选择一项
var checkedNum = $(\"input[name=\'subChk\']:checked\").length;
if(checkedNum == 0) {
alert(\"请选择至少一项！\");
return;
}
// 批量选择
if(confirm(\"确定要删除所选项目？\")) {
var checkedList = new Array();
$(\"input[name=\'subChk\']:checked\").each(function() {
checkedList.push($(this).val());
});
$.ajax({
type: \"POST\",
url: \"deletemore\",
data: {\'delitems\':checkedList.toString()},
 success: function(result) {
$(\"[name =\'subChk\']:checkbox\").attr(\"checked\", false);
window.location.reload();
}
});
}
});
});
页面元素：
<a href=\"#\" id=\"del_model\"><span>删除用户</span>
<th class=\"tal\"><input type=\"checkbox\" id=\"allChk\"/>全选</th>
<td><input type=\"checkbox\" name=\"subChk\" value=\"${user.id}\"/></td>

回调函数，在请求完成后需要进行的操作：此处是把选中的checkbox去掉（因为是用到了freemarker的list循环，去掉是数据后checkbox序号变化，还有有相应未知的checkbox被选中，需要去掉）。
复制代码 代码如下:

success: function(result) {
$(\"[name = \'items\']:checkbox\").attr(\"checked\", false);
window.location.reload();
}

java后台代码：
复制代码 代码如下:

@RequestMapping(value = \"/deletemore\", method = RequestMethod.POST)
public String deleteMore(HttpServletRequest request, HttpServletResponse response) {
String items = request.getParameter(\"delitems\");
String[] item = items.split(\",\");
for (int i = 0; i < item.length; i++) {
userService.delete(Integer.parseInt(item[i]));
}
return \"redirect:list\";
}

效果图:

本文地址：https://www.stayed.cn/item/23817

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案