Java单体应用

原文地址：http://www.work100.net/training/monolithic-project-iot-cloud-admin-manager-multi-delete.html
更多教程：光束云 - 免费课程

批量删除

序号	文内章节	视频
1	概述	-
2	列表复选框	-
3	全选与反选	-
4	实现批量删除功能	-
5	测试验证	-
6	实例源码	-

请参照如上章节导航进行阅读

1.概述

接下来实现 账户列表 页面的 批量删除 操作，预期实现的画面效果如下：

批量选择

删除确认

2.列表复选框

样式引入

复选框的样式需要使用 icheck-bootstrap 插件，在 resources_head.jsp 文件中引入：

<link rel="stylesheet" href="/static/assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">

表头复选框

注意命名，代码如下：

<th>
    <div class="icheck-primary d-inline">
        <input type="checkbox" id="checkAll" name="checkAll" />
        <label for="checkAll" />
    </div>
</th>

行复选框

注意命名，代码如下：

<td>
    <div class="icheck-primary d-inline">
        <input type="checkbox" id="checkItem_${authManager.userKey}" name="checkItem" value="${authManager.userKey}" />
        <label for="checkItem_${authManager.userKey}" />
    </div>
</td>

3.全选与反选

提取通用

列表的 全选与反选 功能是通用功能，下面我们将常用方法提取到公用文件 table-utils.js 中，代码如下：

let Table = function() {

    const checkAll = $('#checkAll');
    const checkItems = $('input[name="checkItem"]');

    /**
     * CheckBox 全选与取消全选
     */
    let handleInitCheckboxClick = function() {
        checkAll.click(function() {
            if ($(this).prop('checked')) {
                // 全选
                checkItems.prop('checked', true);
            } else {
                // 取消全选
                checkItems.prop('checked', false);
            }
        });
    }

    /**
     * 获取 CheckBox 选择值
     * @returns {any[]}
     */
    let handleGetCheckboxCheckedValues = function() {
        let arrCheckedValues = new Array();
        checkItems.each(function() {
            if ($(this).prop('checked')) {
                arrCheckedValues.push($(this).val())
            }
        })
        return arrCheckedValues;
    }

    return {
        init: function() {
            handleInitCheckboxClick();
        },

        getCheckboxCheckedValues: function() {
            return handleGetCheckboxCheckedValues();
        }
    }
}();

$(function() {
    Table.init();
});

使用

使用时只需将 table-utils.js 文件引入，代码如下：

<script src="/static/assets/js/table-utils.js"></script>

4.实现批量删除功能

4.1.视图页面脚本代码

// 批量删除
function multiDelete() {
    let userKeys = Table.getCheckboxCheckedValues();
    if (userKeys.length == 0) {
        Message.showFail('请至少选择一条记录');
        return;
    }
    ModalDialog.showConfirm('multi-delete-confirm', '操作确认', '批量删除后数据不可恢复，您确认要操作吗？', multiDelete_callback, userKeys);
}

function multiDelete_callback(userKeys) {
    $.ajax({
        'url': '/auth/manager/multi-delete',
        'type': 'POST',
        'data': { 'userKeys': userKeys.toString() },
        'dataType': 'JSON',
        'success': function(ret) {
            if (ret.status === 200) {
                location.href = '/auth/manager/list';
                // Message.showSuccess(ret.message);
            } else {
                Message.showFail(ret.message);
            }
        }
    });
}

脚本中使用模态确认弹框，所以需要引入 modal-dialog-utils.js 公用文件。

4.2.为批量删除按钮添加事件

<a class="dropdown-item" href="#" onclick="multiDelete()">批量删除</a>

4.3.为AuthManagerMapper.xml增加语句

增加 multiDelete 语句定义，代码如下：

<delete id="multiDelete">
    DELETE FROM auth_manager
    <if test="array != null and array.length > 0">
        WHERE user_key IN
        <foreach collection="array" open="(" close=")" item="userKey" separator=",">
            #{userKey}
        </foreach>
    </if>
    <if test="array == null or array.length == 0">
        WHERE 1 = 2
    </if>
</delete>

4.4.修改AuthManagerDao接口

增加 multiDelete 方法定义，代码如下:

/**
 * 批量删除
 *
 * @param userKeys
 */
void multiDelete(String[] userKeys);

4.5.修改AuthManagerService接口

增加 multiDelete 方法定义，代码如下:

/**
 * 批量删除
 *
 * @param userKeys
 */
void multiDelete(String[] userKeys);

4.6.修改AuthManagerServiceImpl实现

增加 multiDelete 方法定义，代码如下:

@Override
public void multiDelete(String[] userKeys) {
    authManagerDao.multiDelete(userKeys);
}

4.7.修改ManagerController控制器

增加 multiDelete 方法，代码如下：

@ResponseBody
@RequestMapping(value = "multi-delete", method = RequestMethod.POST)
public BaseResult multiDelete(String userKeys) {
    try {
        String[] arrUserKeys = userKeys.split(",");
        if (arrUserKeys == null || arrUserKeys.length <= 0) {
            return BaseResult.fail("请至少选择一条记录");
        }
        for (String userKey : arrUserKeys) {
            if ("8c41b9a54b2e2a4180cc1271b4672779".equals(userKey)) {
                return BaseResult.fail("不能删除默认管理员账号:xiaojun.liu");
            }
        }
        authManagerService.multiDelete(arrUserKeys);
        return BaseResult.success("操作成功");
    } catch (Exception ex) {
        return BaseResult.fail("未知错误");
    }
}

5.测试验证

重启 Tomcat 测试验证功能效果。

6.实例源码

实例源码已经托管到如下地址：

• https://github.com/work100-net/training-stage2/tree/master/iot-cloud3

• https://gitee.com/work100-net/training-stage2/tree/master/iot-cloud3

---

上一篇：JS代码重构

上一篇：分页功能

---

如果对课程内容感兴趣，可以扫码关注我们的 公众号 或 QQ群，及时关注我们的课程更新