聚星Note07

聚星Note07

聚星Note07 - 角色维护2

• 1 新增操作
• 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，并设置为全局变量leId = 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":leId,"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);
}