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

「爱情、让人受尽委屈。」 2023-06-28 04:53 22阅读 0赞

# 步骤 #

*  给“铅笔”按钮绑定单击响应函数
    
     *  因为“铅笔”按钮是动态生成的，所以需要使用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">×</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);
    	}