聚星Note08 - 角色维护(3)

1 单条删除

无论是单条删除, 还是批量删除, 后台处理代码一致

1. my-js/my-role.js 的 fillTableBody 函数中在删除图标处添加 id
2. 创建模态框 WEB-INF/modal-role-confirm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<div id="confirmModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                         data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">删除角色</h4>
            </div>
            <div class="modal-body">
                <h4>请确认是否要删除下列角色：</h4>
                <div id="roleNameDiv" style="text-align: center;"></div>
            </div>
            <div class="modal-footer">
                <button id="removeRoleBtn" type="button"
                         class="btn btn-primary">确认删除</button>
            </div>
        </div>
    </div>
</div>

3. WEB-INF/role-page.jsp引入模态框

<%@include file="/WEB-INF/modal-role-confirm.jsp" %>

4. 删除图标,添加点击响应事件

$("#rolePageBody").on("click",".removeBtn",function(){
    // 获取角色名称
    var roleName = $(this).parent().prev().text();

    // 创建 role 对象存入数组
    var roleArray = [{
        roleId:this.id,
        roleName:roleName
    }];

    // 打开模态框
    showConfirmModal(roleArray);
});

5. WEB-INF/role-page.jsp 添加 ajax 代码, 执行删除

$("#removeRoleBtn").click(function(){
    // 从全局变量范围获取 roleIdArray，转换为 JSON 字符串
    var requestBody = JSON.stringify(window.roleIdArray);
    $.ajax({
        "url":"role/remove/by/role/id/array.json",
        "type":"post",
        "data":requestBody,
        "contentType":"application/json;charset=UTF-8",
        "dataType":"json",
        "success":function(response){
            var result = response.operationResult;

            if(result == "SUCCESS") {
                layer.msg("删除成功！");
                // 重新加载分页数据
                generatePage();
            }
            if(result == "FAILED") {
                layer.msg("删除失败！" + response.operationMessage);
            }
        },
        "error":function(response){
            layer.msg(response.status + " " + response.statusText);
        }
    });
    // 关闭模态框
    $("#confirmModal").modal("hide");
});

 

2 批量删除

1. 为多选框 checkbox 绑定点击响应函数

$("#summaryBox").click(function(){
    // 获取当前多选框自身的状态
    var currentStatus = this.checked;

    // 用当前多选框的状态设置其他多选框
    $(".itemBox").prop("checked", currentStatus);
});

2. WEB-INF/role-page.jsp 添加 ajax 代码, 全选、全不选操作

$("#rolePageBody").on("click",".itemBox",function(){
    // 获取当前已经选中的.itemBox的数量
    var checkedBoxCount = $(".itemBox:checked").length;

    // 获取全部.itemBox的数量
    var totalBoxCount = $(".itemBox").length;

    // 使用二者的比较结果设置总的checkbox
    $("#summaryBox").prop("checked", checkedBoxCount == totalBoxCount);
});

3. 批量删除按钮绑定点击响应事件

$("#batchRemoveBtn").click(function(){
    // 创建数组对象，存放获取到的角色对象
    var roleArray = [];
    // 遍历当前选中的多选框
    $(".itemBox:checked").each(function(){
        // 使用this引用当前遍历得到的多选框
        var roleId = this.id;

        // 通过 DOM 操作获取角色名称
        var roleName = $(this).parent().next().text();
        roleArray.push({
            "roleId":roleId,
            "roleName":roleName
        });
    });
    // 检查 roleArray 的长度是否为0
    if(roleArray.length == 0) {
        layer.msg("请至少选择一个执行删除");
        return ;
    }
    // 调用专门的函数打开模态框
    showConfirmModal(roleArray);
});

4. my-js/my-role.js 添加

// 显示删除模态框
function showConfirmModal(roleArray) {
    // 打开模态框
    $("#confirmModal").modal("show");
    // 清除旧的数据
    $("#roleNameDiv").empty();
    // 在全局变量范围创建数组用来存放角色id
    window.roleIdArray = [];
    // 遍历 roleArray 数组
    for(var i = 0; i < roleArray.length; i++) {
        var role = roleArray[i];
        var roleName = role.roleName;
        $("#roleNameDiv").append(roleName+"<br/>");

        var roleId = role.roleId;

        // 调用数组对象的 push() 方法存入新元素
        window.roleIdArray.push(roleId);
    }
}

5. com.turling.gatherStars.mvc.handler.RoleHandler 添加

@ResponseBody
@RequestMapping("/role/remove/by/role/id/array.json")
public ResultEntity<String> removeByRoleIdAarry(@RequestBody List<Integer> roleIdList) {
    roleService.removeRole(roleIdList);
    return ResultEntity.successWithoutData();
}

6. com.turling.gatherStars.service.api.RoleService 添加

void removeRole(List<Integer> roleIdList);

7. com.turling.gatherStars.service.impl.RoleServiceImpl 添加

public void removeRole(List<Integer> roleIdList) {
    RoleExample example = new RoleExample();
    RoleExample.Criteria criteria = example.createCriteria();

    // DELETE FROM t_role WHERE id IN (5,8,12);
    criteria.andIdIn(roleIdList);
    roleMapper.deleteByExample(example);
}

 

3 代码托管

将代码 push 到 git@gitee.com:turling/gather-stars.git