jquery+ajax实现数据的批量删除

在写项目的时候，由于数据比较多，删除数据的时候一个一个的点击删除比较麻烦，所以准备在项目中使用批量删除的功能。批量删除在项目中的实现比较简单。

批量删除功能的实现主要难度是在前端，在后端只需要用mybatis做一个批量删除的接口就行。

1.增加表格数据勾选框

如果要在表格数据中实现批量删除，那么最基本的需要一个勾选框，选中了数据之前的勾选框才会进行删除。因此我们首先要在表格中加入勾选框，代码如下：

    <table class="table table-border table-bordered table-bg table-hover table-sort">
        <thead>
        <tr class="text-c">
            <th width="25"><input type="checkbox" name="subCheck" id="subCheck"/></th>
            <th width="40">序号</th>
            <th width="">员工工号</th>
            <th width="">员工姓名</th>
            <th width="">手机号</th>
            <th width="">加入时间</th>
            <th width="">所属部门</th>
            <th width="">所属职位</th>
            <th width="">是否为管理员</th>
            <th width="">工作状态</th>
            <th width="">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr class="text-c" th:each="item:${lists}">
            <td><input type="checkbox" th:attr="value=${item.empId}" name="subCheck" /></td>
            <td th:text="${itemStat.count}"></td>
            <td th:text="${item.empNum}"></td>
            <td th:text="${item.empName}"></td>
            <td th:text="${item.phone}"></td>
            <td th:text="${#dates.format(item.createTime,'yyyy-MM-dd')}"></td>
            <td th:text="${item.deptName}"></td>
            <td th:text="${item.jobName}"></td>
            <td class="flag" th:attr="value=${item.flag}" th:text="${item.roleName}==null?'暂未分配':${item.roleName}"></td>
            <th:block th:if="${item.eStatus}==1">
                <td class="td-status"><span class="label label-success radius">正常</span></td>
            </th:block>
            <th:block th:if="${item.eStatus}==0">
                <td class="td-status"><span class="label radius">异常</span></td>
            </th:block>
            <td class="td-manage" th:switch="${item.eStatus}">
                <span th:case="1">
                    <a style="text-decoration:none" th:onClick="'javascript:emp_stop(this,\''+${item.empId}+'\')'" href="javascript:;" title="异常"><i class="Hui-iconfont">&#xe631;</i></a>
                </span>
                <span th:case="0">
<a style="text-decoration:none" th:onClick="'javascript:emp_start(this,\''+${item.empId}+'\')'" href="javascript:;" title="正常"><i class="Hui-iconfont">&#xe615;</i></a>
                </span>
                <a title="详情" href="javascript:;" th:onclick="'javascript:emp_show(\''+${item.empId}+'\')'" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe665;</i></a>
                <a title="编辑" href="javascript:;" th:onclick="'javascript:layer_update(this,\''+${item.empId}+'\')'" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i> </a>
                <a title="删除" href="javascript:;" th:onclick="'javascript:emp_del(this, \''+${item.empId}+'\')'" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>
            </td>
        </tr>
        </tbody>
    </table>

数据表格的代码如上所示，勾选框采用的是input框，主要是用name=”subCheck”做标识。

2.判断是否选中了数据

当我们点击了批量删除按钮之后，首先应该判断是否选中的数据，选中了之后才能进行下一步操作，没有选中数据则不进行下一步操作，并给出相应操作的提示。

var checkNum=$("input[name='subCheck']:checked").length;
    if (checkNum==0){
        layerOpen("请至少选择一项");
        return;
    }

在这里，layerOpen是我自己封装的一个方法。功能特别简单，主要就是一个弹窗，弹出自定义的输出内容。代码如下：

function layerOpen(msg) {
    var index = layer.open({
        skin: 'layui-layer-molv', //样式类名
        content: msg,
        btn: ['确定'],
        shade: 0.4,
        shadeClose: true,
        title: ['错误信息', 'text-align:center; color: red'],
        yes: function () {
            layer.close(index);
        }
    })
}

3.遍历所有的勾选框

//批量选择
    layer.confirm('确定要删除吗？', function (index) {
        //获取所有选中的checked框
        var option = $(":checked");
        var checkedId = "";
        var flag=true;
        //拼接除全选框外所有选中的id
        for (var i=0, len = option.length; i < len; i++){
            if (flag){
                if (option[i].id == 'subCheck'){
                    flag = true;
                }else {
                    flag = false;
                    checkedId += option[i].value;
                }
            }else {
                checkedId += "," +option[i].value
            }
        }

先弹出一个确认框，当点击确认时才进行下一步的操作，否则直接退出。遍历当前页面上的每一个勾选框，遇到第一个勾选框选中时，在checkedId中存放这个勾选框的value值，也就是数据的UUID值，刚好这个值就是我们后台需要的，然后将定义的标识符flag定为false。之后继续遍历，遇到第二个勾选框被勾选时，记录数据的UUID,同时加一个”,”进行分隔。

4.将选中的数据UUID通过ajax传到后台

$.ajax({
            type: "post",
            url: "/permission/user/batchDelete",
            dataType: "json",
            data: {"checkedId":checkedId},
            success: function (result) {
                if (result.code == 0){
                    layer.msg(result.data, {icon: 6, time: 2000}, function () {
                        retrieve();
                    })
                }else{
                    layer.msg(result.data, {icon: 5,time: 2000});
                }
            },
            error: function (reslut) {
                layer.msg(reslut.data, {icon: 5, time: 2000});
            }
        })

5.在后台对数据库数据进行操作

//批量删除员工信息
@PostMapping(value = "/batchDelete")
public void batchDelete(String empId){
    String[] empArrays=empId.split(",");
    List<String> list=Arrays.asList(empArrays);
    for (String id:list){
        Staff staff=empService.getEmpByEmpId(id);
        if (staff.isFlag()){
            ResponseUtils.writeErrorResponse(request,response,"选中的员工包括管理员，无法删除");
            throw new MyException("选中的员工信息包括管理员，无法删除");
        }
    }
    empService.batchDelete(list);
    ResponseUtils.writeSuccessReponse(request,response,"批量删除员工信息成功");

}

因为后台传过来的是一个字符串，所以我们首先将字符串切割开来放到一个数组里面，最后将数组转化为list集合，直接传递给mybatis完成删除操作即可。

<delete id="batchDelete" parameterType="java.util.List">
DELETE e.*, em.*, u.*, ur.*
FROM t_emp e
LEFT JOIN t_emp_param em
ON e.EMP_ID=em.EMP_ID
LEFT JOIN t_user u
ON e.EMP_ID = u.USER_ID
LEFT JOIN t_user_role ur
ON u.USER_ID = ur.USER_ID
WHERE e.EMP_ID IN
<foreach collection="list" item="item" open="(" close=")" separator=",">
  #{item}
</foreach>
</delete>

后台的操作比较简单，但是因为涉及到多张表关联，在这里我用到的是将多张表关联在一起然后匹配字段一起删除，比起级联删除，这样对资源池的消耗比较小。

6.对页面进行刷新，重新加载数据库中的数据

/**
 * 刷新数据
 */
function reload() {
    var data={
        pageNo: laypage_curr || 1,
        pageSize: laypage_limit || 10
    };
    common.getData('post','/emp/retrieve',data,'html',$("#page_data"));
}

以上操作即可实现数据的批量删除，操作比较简单，主要是为了记录下这个过程。