聚星Note07 - 角色维护(2)

1 新增操作

1. WEB-INF/role-page.jsp 添加绑定单击响应函数

$("#showAddModalBtn").click(function () {
    $("#addModal").modal("show");
});

2. 创建模态框 WEB-INF/modal-role-add.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<div id="addModal" 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">
                <form class="form-signin" role="form">
                    <div class="form-group has-success has-feedback">
                        <input type="text" name="roleName"
                                 class="form-control" placeholder="请输入角色名称" autofocus>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="saveRoleBtn" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

3. WEB-INF/role-page.jsp 引入模态框, 模态框默认情况下是隐藏的, 故为页面整洁放置在后面

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

4. WEB-INF/role-page.jsp 添加ajax代码, 执行保存

$("#saveRoleBtn").click(function () {
    // 获取文本框新的角色名称
    var roleName = $.trim(
        // 匹配 name 属性等于 roleName 的元素
        $("#addModal [name=roleName]").val()
    );
    // 发送 ajax 请求执行更新
    $.ajax({
        "url": "role/save.json",
        "type": "post",
        "data": {
            "name": roleName
        },
        "dataType": "json",
        "success": function (response) {
            console.log(response)
            var result = response.operationResult;
            if(result == "SUCCESS") {
                layer.msg("添加成功！");

                // 将页码定位到最后一页
                window.pageNum = 99999999;

                // 重新加载分页数据
                generatePage();
            }
            if(result == "FAILED") {
                layer.msg("添加失败失败！" + response.operationMessage);
            }
        },
        "error": function (response) {
            layer.msg(response.status + " " + response.statusText);
        }
    });
    // 关闭模态框
    $("#addModal").modal("hide");
    // 清理模态框
    $("#addModal [name=roleName]").val("");
});

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

@ResponseBody
@RequestMapping("role/save.json")
public ResultEntity<String> saveRole(Role role){
    roleService.saveRole(role);
    return ResultEntity.successWithoutData();
}

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

void saveRole(Role role);

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

public void saveRole(Role role) {
    roleMapper.insert(role);
}

 

2 修改操作

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<div id="editModal" 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">
                <form class="form-signin" role="form">
                    <div class="form-group has-success has-feedback">
                        <input type="text" name="roleName"
                                 class="form-control" placeholder="请输入角色名称" autofocus>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="updateRoleBtn" type="button" class="btn btn-success">更新</button>
            </div>
        </div>
    </div>
</div>

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

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

4. 修改图标,添加点击响应事件

$("#rolePageBody").on("click",".pencilBtn",function(){
    // 打开模态框
    $("#editModal").modal("show");

    // 获取当前行的角色名称
    var roleName = $(this).parent().prev().text();

    // 获取当前角色的 id，并设置为全局变量
    window.roleId = this.id;

    // 数据回填，使用 roleName 的值设置模态框中的文本框
    $("#editModal [name=roleName]").val(roleName);
});

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

 $("#updateRoleBtn").click(function(){
    // 从文本框中获取新的角色名称
    var roleName = $("#editModal [name=roleName]").val();

    // 发送 Ajax 请求执行更新
    $.ajax({
        "url":"role/update.json",
        "type":"post",
        "data":{
            "id":window.roleId,
            "name":roleName
        },
        "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);
        }
    });

    // 关闭模态框
    $("#editModal").modal("hide");
});

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

@ResponseBody
@RequestMapping("role/update.json")
public ResultEntity<String> updateRole(Role role){
    roleService.updateRole(role);
    return ResultEntity.successWithoutData();
}

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

void updateRole(Role role);

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

public void updateRole(Role role) {
    roleMapper.updateByPrimaryKey(role);
}