尚筹网：角色维护之更新角色

步骤

• 给“铅笔”按钮绑定单击响应函数
  • 因为“铅笔”按钮是动态生成的，所以需要使用on()方式
• 打开模态框
  • 准备模态框
  • 把roleId保存到全局变量
  • 获取到当前“铅笔”按钮所在行的roleName
  • 使用roleName回显模态框中的表单
• 给“更新”按钮绑定单击响应函数
  • 收集文本框内容
  • 发送请求
  • 请求处理完成关闭模态框、重新分页

给“铅笔”按钮绑定单击响应函数

标记"铅笔"按钮

找到/atcrowdfunding-admin-1-webui/src/main/webapp/script/my-role.js文件

function generateTableBody(pageInfo) {
	
	……
	
	for(var i = 0; i < list.length; i++) {

		……
		
		var pencilBtn = "<button roleId='"+role.id+"' type='button' class='btn btn-primary btn-xs editBtn'><i class=' glyphicon glyphicon-pencil'></i></button>";
		
		……
	}
}

准备模态框

1、创建/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/include-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">
			<form role="form">
				<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">
					<input type="text" id="roleNameInputEdit" class="form-control"
						placeholder="请输入角色名称" />
				</div>
				<div class="modal-footer">
					<button id="editModalBtn" type="button" class="btn btn-warning">
						<i class="glyphicon glyphicon-edit"></i> 更新
					</button>
					<button type="reset" class="btn btn-primary">
						<i class="glyphicon glyphicon-refresh"></i> 重置
					</button>				</div>
			</form>
		</div>
	</div>
</div>

2、/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/role-page.jsp引用模态框

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

绑定单击响应函数

/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/role-page.jsp

$("#roleTableBody").on("click",".editBtn",function(){
	
	// 1.获取当前按钮的roleId
	window.roleId = $(this).attr("roleId");
	
	// 2.获取当前按钮所在行的roleName
	var roleName = $(this).parents("tr").children("td:eq(2)").text();
	
	// 3.修改模态框中文本框的value值，目的是在显示roleName
	$("#roleNameInputEdit").val(roleName);
	
	// 4.打开模态框
	$("#editModal").modal("show");
});

给“更新”按钮绑定单击响应函数

前端

/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/role-page.jsp

$("#editModalBtn").click(function(){
	
	// 1.获取文本框值
	var roleName = $.trim($("#roleNameInputEdit").val());
	
	if(roleName == null || roleName == "") {
		layer.msg("请输入有效角色名称！");
		
		return ;
	}
	
	// 2.发送请求
	$.ajax({
		"url":"role/update/role.json",
		"type":"post",
		"data":{
			"id":window.roleId,
			"name":roleName
		},
		"dataType":"json",
		"success":function(response){
			var result = response.result;
			
			if(result == "SUCCESS") {
				layer.msg("操作成功！");
				
				// 3.操作成功重新分页
				showPage();
			}
			
			if(result == "FAILED") {
				layer.msg(response.message);
			}
			
			// 4.不管成功还是失败，关闭模态框
			$("#editModal").modal("hide");
			
		}
	});
});

后端

/atcrowdfunding-admin-2-component/src/main/java/com/atguigu/crowd/funding/handler/RoleHandler.java：

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

/atcrowdfunding-admin-2-component/src/main/java/com/atguigu/crowd/funding/service/impl/RoleServiceImpl.java：

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