我是阿福,公众号「阿福聊编程」作者,一个在后端技术路上摸盘滚打的程序员,在进阶的路上,共勉!文章已收录在 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>
jQuery代码
// 全选/全不选性能 $("#summaryBox").click(function () { $(".itemBox").prop("checked", this.checked); });
前后台交互jQuery代码实现
给批量删除按钮标记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; } }); }
后盾实现
AdminController
@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; }}
AdminService
public void batchAdminList(List<Integer> list) { adminMapper.batchAdminList(list); }
AdminMapper及AdminMapper.xml
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_...