Java单体应用 - 项目实战(后台) - 03.后台账户管理 - 08.批量删除

原文地址: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.实例源码

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


上一篇:JS代码重构

上一篇:分页功能


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

posted @ 2020-04-01 15:18  光束云  阅读(374)  评论(0编辑  收藏  举报