我是阿福,公众号「阿福聊编程」作者,一个在后端技术路上摸盘滚打的程序员,在进阶的路上,共勉!文章已收录在 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_...