共计 5739 个字符，预计需要花费 15 分钟才能阅读完成。
我是阿福，公众号「阿福聊编程」作者，一个在后端技术路上摸盘滚打的程序员，在进阶的路上，共勉！文章已收录在 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_…
正文完
