我是阿福,公众号「阿福聊编程」作者, 一个在后端技术路上摸盘滚打的程序员 ,在进阶的路上,共勉!文章已收录在 JavaSharing 中,包含Java技术文章,面试指南,资源分享。
首先定义全选框的的id属性 id="summaryBox"
<th width="30"><input id="summaryBox" type="checkbox"></th>
然后定义一个数据单选框的class属性 class="itemBox"
,说明:adminId属性是HTML标签本身并没有的属性,是我们强行设置的。
<th width="30"><input adminId="${item.id}" class="itemBox" type="checkbox"></th>
整个表单文件
<table class="table table-bordered"> <thead> <tr> <th width="30">#</th> <th width="30"><input id="summaryBox" type="checkbox"></th> <th>账号</th> <th>名称</th> <th>邮箱地址</th> <th width="100">操作</th> </tr> </thead> <tbody> <c:if test="${empty requestScope['PAGEINFO-ADMIN'].list}"> <tr> <td style="text-align: center" colspan="6">抱歉,没有用户查询的数据!!!!</td> </tr> </c:if> <c:if test="${! empty requestScope['PAGEINFO-ADMIN'].list}"> <c:forEach items="${requestScope['PAGEINFO-ADMIN'].list}" var="item" varStatus="myStatus"> <tr> <td>${myStatus.count}</td> <th width="30"><input adminId="${item.id}" class="itemBox" type="checkbox"></th> <td>${item.loginAcct}</td> <td>${item.userName}</td> <td>${item.email}</td> <td> <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button> <a href="admin/toupdateadmin.action?adminId=${item.id}" type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></a> <button type="button" adminId="${item.id}" class="btn btn-danger btn-xs uniqueRemoveBtn"><i class=" glyphicon glyphicon-remove"></i></button> </td> </tr> </c:forEach> </c:if> </tbody> <tfoot> <tr> <td colspan="6" align="center"> <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div> </td> </tr> </tfoot> </table>
// 全选/全不选功能 $("#summaryBox").click(function () { $(".itemBox").prop("checked", this.checked); });
给批量删除按钮标记id
//批量删除按钮实现 <button type="button" id="batchAdmin" name="batchAdmin" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 批量删除 </button>
//封装统一的Ajax响应结果 // 给批量删除按钮绑定单击响应函数 $("#batchAdmin").click(function () { var adminIdArray = new Array(); var loginAcct; $(".itemBox:checked").each( function () { // this.adminId拿不到值,原因是:this作为DOM对象无法读取HTML标签本身没有的属性 // 将this转换为jQuery对象调用attr()函数就能够拿到值 var adminId = $(this).attr("adminId"); // 调用数组对象的push()方法将数据存入数组 loginAcct = $(this).parents("tr").children("td:eq(2)").text(); adminIdArray.push(adminId); }); batchRemoveAdmin(adminIdArray, loginAcct); }); function batchRemoveAdmin(adminIdArray, loginAcct) { // 将JSON数组转换为JSON字符串 var adminListId = JSON.stringify(adminIdArray); if (adminIdArray.length == 0) { alert("请勾选需要删除的记录!"); return; } var confirmResult = confirm("你确认要删除" + loginAcct + "用户吗?"); if (!confirmResult) { return; } $.ajax({ "url": "admin/batchAdminList.action", "type": "post", "contentType": "application/json;charset=UTF-8", "data": adminListId, "dataType": "json", "success": function (response) { var result = response.result; if (result == 'SUCCESS') { window.location.href = "admin/queryAdmin.action?pageNum=${requestScope['PAGEINFO-ADMIN'].pageNum}&keyword=${param.keyword}"; } if (result == 'FAILED') { alert(response.message); result; } }, "error": function (response) { alert(response.message); return; } }); }
@ResponseBody @RequestMapping(value = "/batchAdminList", method = RequestMethod.POST) public ResultEntity<String> batchAdminList(@RequestBody List<Integer> adminListId) { try { adminService.batchAdminList(adminListId); return ResultEntity.successWithoutData(); } catch (Exception e) { return ResultEntity.failed(null, e.getMessage()); } }
说明:
@RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的);GET方式无请求体,所以使用@RequestBody接收数据时,前端不能使用GET方式提交数据,而是用POST方式进行提交。在后端的同一个接收方法里,@RequestBody与@RequestParam()可以同时使用,@RequestBody最多只能有一个,而@RequestParam()可以有多个。
注:一个请求,只有一个RequestBody;一个请求,可以有多个RequestParam。
注:当同时使用@RequestParam()和@RequestBody时,@RequestParam()指定的参数可以是普通元素、 数组、集合、对象等等(即:当,@RequestBody 与@RequestParam()可以同时使用时,原SpringMVC接收参数的机制不变,<font color='red'>只不过RequestBody 接收的是请求体里面的数据;而RequestParam接收的是key-value</font>
里面的参数,所以它会被切面进行处理从而可以用普通元素、数组、集合、对象等接收)。
即:如果参数时放在请求体中,传入后台的话,那么后台要用@RequestBody才能接收到;如果不是放在请求体中的话,那么后台接收前台传过来的参数时,要用@RequestParam来接收,或则形参前什么也不写也能接收。
说明@ResponseBody是作用在方法上的,@ResponseBody 表示该方法的返回结果直接写入 HTTP response Body 中,一般在异步获取数据时使用【也就是AJAX】,在使用 @RequestMapping后,返回值通常解析为跳转路径,但是加上 @ResponseBody 后返回结果不会被解析为跳转路径,而是直接写入 HTTP response Body 中。 比如异步获取 json 数据,加上 @ResponseBody 后,会直接返回 json 数据。@RequestBody 将 HTTP 请求正文插入方法中,使用适合的 HttpMessageConverter 将请求体写入某个对象。
package com.zfcoding.common; /** * @author 13394 */ public class ResultEntity<T> { public static final String SUCCESS = "SUCCESS"; public static final String FAILED = "FAILED"; public static final String NO_MESSAGE = "NO_MESSAGE"; public static final String NO_DATA = "NO_DATA"; // 方便返回成功结果(不携带查询结果情况) public static ResultEntity<String> successWithoutData() { return new ResultEntity<String>(SUCCESS, NO_MESSAGE, NO_DATA); } // 方便返回成功结果(携带查询结果情况) public static <E> ResultEntity<E> successWithoutData(E data) { return new ResultEntity<E>(SUCCESS, NO_MESSAGE, data); } // 方便返回失败结果 public static <E> ResultEntity<E> failed(E data, String message) { return new ResultEntity<E>(FAILED, message, data); } private String result; private String message; private T data; public ResultEntity() { } public ResultEntity(String result, String message, T data) { super(); this.result = result; this.message = message; this.data = data; } @Override public String toString() { return "ResultEntity [result=" + result + ", message=" + message + ", data=" + data + "]"; } public String getResult() { return result; } public void setResult(String result) { this.result = result; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public T getData() { return data; } public void setData(T data) { this.data = data; } }
public void batchAdminList(List<Integer> list) { adminMapper.batchAdminList(list); }
void batchAdminList(List<Integer> list); <delete id="batchAdminList" parameterType="java.util.List"> delete from t_admin where id in <foreach collection="list" item="item" open="(" separator="," close=")"> #{item} </foreach> </delete>
到这里批量删除的功能就实现了。
文章参考: https://blog.csdn.net/justry_...