尚筹网：菜单维护之增加/更新

忘是亡心i 2023-06-28 08:42 51阅读 0赞

# 生成按钮组 #

/atcrowdfunding-admin-1-webui/src/main/webapp/script/my-menu.js

// 专门生成按钮组的函数
    function generateBtnGrp(treeNode) {
        
    	
    	// 获取当前节点的id（HTML中li标签的id）
    	var treeNodeId = treeNode.tId;
    	
    	// 获取当前节点在数据库中的id值
    	// Menu实体类中的属性，都可以通过treeNode以“.属性名”的方式直接访问
    	var menuId = treeNode.id;
    	
    	// 组装按钮组所在的span的id
    	var btnGrpSpanId = treeNodeId + "_btnGrp";
    	
    	// 生成span标签对应的jQuery对象
    	var $span = $("<span id='"+btnGrpSpanId+"'></span>");
    	
    	// 获取当前节点的level值
    	var level = treeNode.level;
    	
    	// 声明三种按钮
    	var addBtn = "<a οnclick='showAddModal(this)' id='"+menuId+"' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='添加子节点'>  <i class='fa fa-fw fa-plus rbg'></i></a>";
    	var editBtn = "<a οnclick='showEditModal(this)' id='"+menuId+"' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='编辑节点'>  <i class='fa fa-fw fa-edit rbg'></i></a>";
    	var removeBtn = "<a οnclick='showConfirmModal(this)' id='"+menuId+"' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='删除节点'>  <i class='fa fa-fw fa-times rbg'></i></a>";
    	
    	// 根据level进行判断
    	if(level == 0) {
        
    		$span.append(addBtn);
    	}
    	
    	if(level == 1) {
        
    		
    		if(treeNode.children.length > 0) {
        
    			
    			$span.append(addBtn+" "+editBtn);
    			
    		} else {
        
    			
    			$span.append(addBtn+" "+editBtn+" "+removeBtn);
    			
    		}
    		
    	}
    	
    	if(level == 2) {
        
    		
    		$span.append(editBtn+" "+removeBtn);
    		
    	}
    	
    	return $span;
    }

# 增加 #

## 前端部分 ##

1、准备模态框：include-modal-menu-add.jsp：/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/include-modal-menu-add.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <div id="menuAddModal" class="modal fade in" 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">×</span>
    				</button>
    				<h4 class="modal-title">尚筹网系统弹窗</h4>
    			</div>
    			<form>
    				<div class="modal-body">
    						请输入节点名称：<input type="text" name="name"><br>
    						请输入URL地址：<input type="text" name="url"><br>
    						<input type="radio" name="icon" value="glyphicon glyphicon-th-list">           <i class="glyphicon glyphicon-th-list"></i>
    						<input type="radio" name="icon" value="glyphicon glyphicon-dashboard">         <i class="glyphicon glyphicon-dashboard"></i>
    						<input type="radio" name="icon" value="glyphicon glyphicon glyphicon-tasks">   <i class="glyphicon glyphicon glyphicon-tasks"></i>
    						<input type="radio" name="icon" value="glyphicon glyphicon-user">              <i class="glyphicon glyphicon-user"></i>
    						<input type="radio" name="icon" value="glyphicon glyphicon-king">              <i class="glyphicon glyphicon-king"></i>
    						<input type="radio" name="icon" value="glyphicon glyphicon-lock">              <i class="glyphicon glyphicon-lock"></i>
    						<input type="radio" name="icon" value="glyphicon glyphicon-ok">                <i class="glyphicon glyphicon-ok"></i>
    						<input type="radio" name="icon" value="glyphicon glyphicon-check">             <i class="glyphicon glyphicon-check"></i>
    						<input type="radio" name="icon" value="glyphicon glyphicon-th-large">          <i class="glyphicon glyphicon-th-large"></i><br>
    						<input type="radio" name="icon" value="glyphicon glyphicon-picture">           <i class="glyphicon glyphicon-picture"></i>
    						<input type="radio" name="icon" value="glyphicon glyphicon-equalizer">         <i class="glyphicon glyphicon-equalizer"></i>
    						<input type="radio" name="icon" value="glyphicon glyphicon-random">            <i class="glyphicon glyphicon-random"></i>
    						<input type="radio" name="icon" value="glyphicon glyphicon-hdd">               <i class="glyphicon glyphicon-hdd"></i>
    						<input type="radio" name="icon" value="glyphicon glyphicon-comment">           <i class="glyphicon glyphicon-comment"></i>
    						<input type="radio" name="icon" value="glyphicon glyphicon-list">              <i class="glyphicon glyphicon-list"></i>
    						<input type="radio" name="icon" value="glyphicon glyphicon-tags">              <i class="glyphicon glyphicon-tags"></i>
    						<input type="radio" name="icon" value="glyphicon glyphicon-list-alt">          <i class="glyphicon glyphicon-list-alt"></i> 
    						<br/>
    				</div>
    				<div class="modal-footer">
    					<button id="menuAddBtn" type="button" class="btn btn-success"><i class="glyphicon glyphicon-plus"></i> 保存</button>
    					<button id="menuAddResetBtn" 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/menu-page.jsp的最下面的body标签的上面引用：

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

3、在点击+按钮之后打开模态框：/atcrowdfunding-admin-1-webui/src/main/webapp/script/my-menu.js  
![在这里插入图片描述][20200108110906734.png]

//在点击添加按钮时执行这个函数，打开模态框
    function showAddModal(currentBtn) {
        
    	
    	// 打开模态框
    	$("#menuAddModal").modal("show");
    	
    	// 将当前节点的id存入全局变量
    	window.menuId = currentBtn.id;
    }

4、给保存按钮绑定单击函数  
![在这里插入图片描述][20200108111315479.png]  
/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/menu-page.jsp

$("#menuAddBtn").click(function(){
        
    			
    			// 收集表单填写的数据
    			var name = $.trim($("#menuAddModal [name='name']").val());
    			var url = $.trim($("#menuAddModal [name='url']").val());
    			var icon = $("#menuAddModal [name='icon']:checked").val();
    			
    			if(name == null || name == "") {
        
    				layer.msg("请填写菜单项名称！");
    				return ;
    			}
    			
    			if(url == null || url == "") {
        
    				layer.msg("请填写菜单项对应的访问地址！");
    				return ;
    			}
    			
    			// 发送Ajax请求
    			$.ajax({
        
    				"url":"menu/save.json",
    				"type":"post",
    				"dataType":"json",
    				"data":{
        
    					"name":name,
    					"url":url,
    					"pid":window.menuId,	// 当前操作的节点是新节点的父节点
    					"icon":icon
    				},
    				"success":function(response){
        
    					
    					var result = response.result;
    					
    					if(result == "SUCCESS") {
        
    						layer.msg("操作成功！");
    						
    						initWholeTree();
    					}
    					
    					if(result == "FAILED") {
        
    						layer.msg(response.message);
    					}
    					
    				},
    				"error":function(response){
        
    					layer.msg(response.message);
    				}
    			});
    			
    			$("#menuAddModal").modal("hide");
    		});

## 后端部分 ##

1、handler部分

@RequestMapping("/menu/save")
    public ResultEntity<String> saveMenu(Menu menu) {
        
    	
    	menuService.saveMenu(menu);
    	
    	return ResultEntity.successWithoutData();
    }

2、dao

@Override
    	public void saveMenu(Menu menu) {
        
    		// TODO Auto-generated method stub
    		menuMapper.insert(menu);
    	}

# 更新 #

## 前端 ##

1、 准备模态框：include-modal-menu-edit.jsp：\\atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/include-modal-menu-edit.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <div id="menuEditModal" 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">×</span>
    				</button>
    				<h4 class="modal-title">尚筹网系统弹窗</h4>
    			</div>
    			<form>
    				<div class="modal-body">
    					请输入节点名称：<input type="text" name="name" /><br /> 请输入URL地址：<input
    						type="text" name="url" /><br /> <input type="radio" name="icon"
    						value="glyphicon glyphicon-th-list" /> <i
    						class="glyphicon glyphicon-th-list"></i> <input type="radio"
    						name="icon" value="glyphicon glyphicon-dashboard" /> <i
    						class="glyphicon glyphicon-dashboard"></i> <input type="radio"
    						name="icon" value="glyphicon glyphicon glyphicon-tasks" /> <i
    						class="glyphicon glyphicon glyphicon-tasks"></i> <input
    						type="radio" name="icon" value="glyphicon glyphicon-user" /> <i
    						class="glyphicon glyphicon-user"></i> <input type="radio"
    						name="icon" value="glyphicon glyphicon-king" /> <i
    						class="glyphicon glyphicon-king"></i> <input type="radio"
    						name="icon" value="glyphicon glyphicon-lock" /> <i
    						class="glyphicon glyphicon-lock"></i> <input type="radio"
    						name="icon" value="glyphicon glyphicon-ok" /> <i
    						class="glyphicon glyphicon-ok"></i> <input type="radio"
    						name="icon" value="glyphicon glyphicon-check" /> <i
    						class="glyphicon glyphicon-check"></i> <input type="radio"
    						name="icon" value="glyphicon glyphicon-th-large" /> <i
    						class="glyphicon glyphicon-th-large"></i><br /> <input
    						type="radio" name="icon" value="glyphicon glyphicon-picture" /> <i
    						class="glyphicon glyphicon-picture"></i> <input type="radio"
    						name="icon" value="glyphicon glyphicon-equalizer" /> <i
    						class="glyphicon glyphicon-equalizer"></i> <input type="radio"
    						name="icon" value="glyphicon glyphicon-random" /> <i
    						class="glyphicon glyphicon-random"></i> <input type="radio"
    						name="icon" value="glyphicon glyphicon-hdd" /> <i
    						class="glyphicon glyphicon-hdd"></i> <input type="radio"
    						name="icon" value="glyphicon glyphicon-comment" /> <i
    						class="glyphicon glyphicon-comment"></i> <input type="radio"
    						name="icon" value="glyphicon glyphicon-list" /> <i
    						class="glyphicon glyphicon-list"></i> <input type="radio"
    						name="icon" value="glyphicon glyphicon-tags" /> <i
    						class="glyphicon glyphicon-tags"></i> <input type="radio"
    						name="icon" value="glyphicon glyphicon-list-alt" /> <i
    						class="glyphicon glyphicon-list-alt"></i> <br />
    				</div>
    				<div class="modal-footer">
    					<button id="menuEditBtn" type="button" class="btn btn-success">
    						<i class="glyphicon glyphicon-refresh"></i> 更新
    					</button>
    				</div>
    			</form>
    		</div>
    	</div>
    </div>

2、/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/menu-page.jsp的最下面的body标签的上面引用：

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

3、在点击修改按钮之后打开模态框：/atcrowdfunding-admin-1-webui/src/main/webapp/script/my-menu.js

//在点击编辑按钮时执行这个函数，打开模态框
    function showEditModal(currentBtn) {
        
    	
    	// 打开模态框
    	$("#menuEditModal").modal("show");
    	
    	// 获取当前节点的id存入全局变量
    	window.menuId = currentBtn.id;
    	
    	// 发送请求查询Menu对象
    	$.ajax({
        
    		"url":"menu/get/"+window.menuId+".json",
    		"type":"get",
    		"dataType":"json",
    		"success":function(response) {
        
    			
    			var result = response.result;
    			
    			if(result == "SUCCESS") {
        
    				
    				// 从响应数据中获取Menu对象
    				var menu = response.data;
    				
    				// 获取各个属性值
    				var name = menu.name;
    				
    				var url = menu.url;
    				
    				var icon = menu.icon;
    				
    				// 设置各个对应的表单项
    				$("#menuEditModal [name='name']").val(name);
    				
    				$("#menuEditModal [name='url']").val(url);
    				
    				// radio需要让value值和后端查询到的icon一致的设置为被选中
    				$("#menuEditModal [name='icon'][value='"+icon+"']").attr("checked",true);
    			}
    			
    			if(result == "FAILED") {
        
    				layer.msg(response.message);
    			}
    		},
    		"error":function(response) {
        
    			layer.msg(response.message);
    		}
    	});
    	
    }

3、给更新按钮绑定单击函数

![在这里插入图片描述][2020010811340546.png]  
/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/menu-page.jsp

$("#menuEditBtn").click(function(){
        
    			
    			// 收集表单填写的数据
    			var name = $.trim($("#menuEditModal [name='name']").val());
    			var url = $.trim($("#menuEditModal [name='url']").val());
    			var icon = $("#menuEditModal [name='icon']:checked").val();
    			
    			if(name == null || name == "") {
        
    				layer.msg("请填写菜单项名称！");
    				return ;
    			}
    			
    			if(url == null || url == "") {
        
    				layer.msg("请填写菜单项对应的访问地址！");
    				return ;
    			}
    			
    			// 发送Ajax请求
    			$.ajax({
        
    				"url":"menu/update.json",
    				"type":"post",
    				"dataType":"json",
    				"data":{
        
    					"id":window.menuId,
    					"name":name,
    					"url":url,
    					"icon":icon
    				},
    				"success":function(response){
        
    					
    					var result = response.result;
    					
    					if(result == "SUCCESS") {
        
    						layer.msg("操作成功！");
    						
    						initWholeTree();
    					}
    					
    					if(result == "FAILED") {
        
    						layer.msg(response.message);
    					}
    					
    				},
    				"error":function(response){
        
    					layer.msg(response.message);
    				}
    			});
    			
    			$("#menuEditModal").modal("hide");
    		});

## 后端 ##

1、根据id查询menu

// handler
    	@RequestMapping("/menu/get/{menuId}")
    	public ResultEntity<Menu> getMenuById(@PathVariable("menuId")Integer menuId) {
        
    		Menu menu = menuService.getMenuById(menuId);
    		return ResultEntity.successWithData(menu);
    	}

//dao
    	@Override
    	public Menu getMenuById(Integer menuId) {
        
    		// TODO Auto-generated method stub
    		return menuMapper.selectByPrimaryKey(menuId);
    	}

2、更新菜单

@RequestMapping("/menu/update")
    	public ResultEntity<String> updateMenu(Menu menu){
        
    		menuService.updateMenu(menu);
    		return ResultEntity.successWithoutData();
    	}

@Override
    	public void updateMenu(Menu menu) {
        
    		// TODO Auto-generated method stub
    		menuMapper.updateByPrimaryKey(menu);
    	}

/atcrowdfunding-admin-1-webui/src/main/resources/mybatis/mapper/MenuMapper.xml：注意：把SQL中的pid修改去掉，不改变节点的父节点。

<update id="updateByPrimaryKey"
    	parameterType="com.atguigu.crowd.funding.entity.Menu">
    	update t_menu
    	set pid = #{pid,jdbcType=INTEGER},
    	name = #{name,jdbcType=VARCHAR},
    	url = #{url,jdbcType=VARCHAR},
    	icon = #{icon,jdbcType=VARCHAR}
    	where id = #{id,jdbcType=INTEGER}
    </update>

[20200108110906734.png]: https://img-blog.csdnimg.cn/20200108110906734.png
[20200108111315479.png]: https://img-blog.csdnimg.cn/20200108111315479.png
[2020010811340546.png]: https://img-blog.csdnimg.cn/2020010811340546.png