我是阿福,公众号「阿福聊编程」作者,一个在后端技术路上摸盘滚打的程序员,在进阶的路上,共勉!文章已收录在 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接收参数的机制不变,只不过RequestBody 接收的是请求体里面的数据;而RequestParam接收的是key-value
里面的参数,所以它会被切面进行处理从而可以用普通元素、数组、集合、对象等接收)。
即:如果参数时放在请求体中,传入后台的话,那么后台要用@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_deng/article/details/80972817