EasyUI tree菜单添加、删除、保存

最新推荐文章于 2022-05-06 18:35:35 发布
最新推荐文章于 2022-05-06 18:35:35 发布
阅读量7k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shi_longyan/article/details/49361891
版权

效果图：



html代码：


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/easyui/themes/icon.css">
<script type="text/javascript" src="<%= request.getContextPath() %>/easyui/jquery.min.js"></script>
<script type="text/javascript" src="<%= request.getContextPath() %>/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%= request.getContextPath() %>/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%= request.getContextPath() %>/style/js/common.js"></script>
<style type="text/css">
	.top{
		padding:50px 0 20px 50px;
	}
	#fm table tr{
		height:25px;
		font-size:14px;
	}
	#dlg-buttons{
		padding:0 50px;
	}
	
</style>
<script type="text/javascript">
var subSystemcode="";
	//初始化页面组件
	$(function () {
	   //加载combo数据
	   var subSystemCombx=$("#subSystem").combobox({  
		  url:'getDictSubSystem',  
	      valueField: 'code',     
	      textField: 'name', 
	      panelHeight:'auto',
	      editable:false,
	      onSelect:function(record){ 	
	    		//记录下选择的是哪个子系统
	    	  	subSystemcode=record.code;
	    	  	//选中值，加载树
	    	  	var url = "getChildren?code=" + record.code + "&type=ALL";  
	    	  	
				$('#tree_menu').tree({  
					animate: false,  
					checkbox: false,  
					lines: true,  
					url:url,   
					onLoadSuccess: function (row, data) {  
						//$(this).tree("collapseAll");//树节点全部闭合  
					},
					onClick:function(node){						
						//把当前树的信息填到右侧
						$('#fm').form('load',node);						
					}
					
				});  
	      }
	   });  
	    
	   
	});	
	
</script>
<script type="text/javascript">
	var url = "update.json";
	//添加子菜单
	function addSubMenu(){
		
		
		//清空form的信息
		$('#fm').form('clear');
		//获取左侧选中的树节点
		var node = $('#tree_menu').tree('getSelected');            
//         if (!node) {            
//             $.messager.show({
// 				title: 'Error',
// 				msg: "未选择父节点"
// 			});
//             return;
//         }
        if (!subSystemcode) {            
            $.messager.show({
				title: 'Error',
				msg: "未选择系统"
			});
            return;
        }
        //记录左侧的树节点的id
        var id=null;
        if(node!=null){
        	id=node.id;
        }
        
       //初始化赋值：父ID,父节点名称,编码,所属系统,当前编码，state,
        $.post('getChildInit/'+id+'/'+subSystemcode+'.json',function(result){
        	
        	$('#fm').form('load',result);	
		},'json');
       
       //点保存按钮，执行新增操作
        url="save.json";
       
	}
	//添加同级菜单
	function addBrotherMenu() {
		//获取左侧选中的树节点
		var node = $('#tree_menu').tree('getSelected');            
        if (!node) {            
            $.messager.show({
				title: 'Error',
				msg: "未选择同级节点"
			});
            return;
        }
        //初始化赋值：父ID,父节点名称,编码,所属系统,当前编码，state,
        $.post('getBrotherInit/'+node.id+'.json',function(result){
        	$('#fm').form('load',result);	
		},'json');
      
       //点保存按钮，执行新增操作
        url="save.json";
        
	}
	//保存菜单
	function saveMenu(){
		
		$('#fm').form('submit',{
			url: url,
			onSubmit: function(){
				return $(this).form('validate');
			},
			success: function(data){	
							   
				var result = JSON.parse(data);
			
				if (result.error){
					$.messager.show({
						title: 'Error',
						msg: result.error
					});
				} else {
					$.messager.show({
						title: 'Info',
						msg: result.info
					});
					//处理保存完毕,添加节点
					if(url.substring(0,4) =="save") {	
						
						//$('#tree_menu').tree('reload');
						//当前选中的节点 
						var nodeNow = $("#tree_menu").tree('getSelected');
						
						//添加子节点
						if(nodeNow.level<result.auth.level){
						
							$("#tree_menu").tree("append",{
						        parent: nodeNow.target,
						        data:     [{
						        	"id":result.auth.id,
						            "text":result.auth.text
						        }]
							});
							
							$('#tree_menu').tree('reload', nodeNow.target);
						}			
						
						//添加同级节点
						if(nodeNow.level==result.auth.level){							
							var pnode=$("#tree_menu").tree('getParent',nodeNow.target);
							$("#tree_menu").tree("append",{
						        parent: pnode.target,
						        data:     [{
						        	"id":result.auth.id,
						            "text":result.auth.text
						        }]
							});
							
							$('#tree_menu').tree('reload', pnode.target);
						}
					    
					} else {
						//修改完也刷新树
						var node = $('#tree_menu').tree('getSelected'); 						
						if(node) {
							node.text = result.auth.text;
							$("#tree_menu").tree("update", node);
							var pnode=$("#tree_menu").tree('getParent',node.target);
							$('#tree_menu').tree('reload', pnode.target);
						}
						
						
					}
				}
				//点保存按钮，默认执行修改操作
				url="update.json";
			}
		});
		
		
	}
	//删除菜单
	function destroyMenu(){			
		var node = $('#tree_menu').tree('getSelected'); 
		
		if (node){		
			
			$.messager.confirm('Confirm','确定删除该菜单?',function(r){
				if (r){
					$.post('<%= request.getContextPath() %>/manage/auth/delete/'+node.id+'.json',function(result){
						if (result.info){
							$.messager.show({
								title: 'Success',
								msg: result.info
							});
							//刷新节点
							//$('#tree_menu').tree('reload');
							var node = $("#tree_menu").tree("getSelected");							
							$('#tree_menu').tree('remove', node.target);	
							//清空右侧表单数据
							$('#fm').form('clear');
						} else {
							$.messager.show({
								title: 'Error',
								msg: result.error
							});
						}
					},'json');
				}
			});
		}else{
			 $.messager.show({
				title: 'Error',
				msg: "未选择要删除的菜单"
			});
		}
	}
	
	//查询指定菜单,并转向指定菜单
	var keyword = null;
	function searchMenu() {
		keyword = $('#keyword').val();
		//tree 转向指定菜单
			
		//展开第一层节点
		$("#tree_menu").tree('collapseAll');
	    var root = $("#tree_menu").tree("find", "1");
	    $("#tree_menu").tree("expand", root.target);
	
// 		var Node = $("#tree_menu").tree("find", 4); //获取当前节点
//         $("#tree_menu").tree("expand", Node.target);
//         $("#tree_menu").tree("select", Node.target); //定位当前节点        
        $.post('<%= request.getContextPath() %>/manage/auth/getNodeByName/'+keyword+'/'+subSystemcode,function(result){
        	        
        	if(result[0].level==2){
        		var Node = $("#tree_menu").tree("find", result[0].id); //获取当前节点			
   	         	//$("#tree_menu").tree("expand", Node.target);
   	         	$("#tree_menu").tree("select", Node.target); //定位当前节点 
        	}else if(result[0].level==3){
        		var pNode = $("#tree_menu").tree("find", result[0].pid); //获取当前节点的父节点
                $("#tree_menu").tree("expand", pNode.target);
        		//应该当事件结束之后，在find
                var childeNode = $("#tree_menu").tree("find", result[0].id); //获取当前节点
                $("#tree_menu").tree("select", childeNode.target); //定位当前节点
        	}
        	     
		},'json');
	}
</script>
<title>Menu管理</title>
</head>
<body  class="easyui-layout">
<div data-options="region:'west',split:true" style="width: 18%;" >
	<div class="easyui-panel" data-options="border:false" style="padding:5px;">
		<div id="tb" style="padding:3px">
		    <span>菜单:</span>
		    <input id="keyword" class="easyui-textbox" />
		    <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search" οnclick="searchMenu()"></a>
		</div>
		<div id="comboTree" style="padding:3px">
		    <span>系统:</span>
		    <input id="subSystem" class="easyui-combobox" />
		    <ul id="tree_menu" class="easyui-tree" ></ul>
		</div>		
	</div>			
</div>
<div data-options="region:'center', border:false">
	<div id="tt" class="easyui-panel" data-options="fit:true,border:false,plain:true">		
		<div class="top">
			<form id="fm" method="post">
				<input type="hidden" name="id">
				<input type="hidden" name="state">
				<input type="hidden" name="subSystemCode">
				<input type="hidden" name="level">
				<table>					
					<tr>
						<td><label>父级菜单ID:</label></td>
						<td><input name="pid" class="easyui-textbox" id="pid" readonly="readonly"></td>
					</tr>
					<tr>
						<td><label>父级菜单名称:</label></td>
						<td><input name="pname" class="easyui-textbox" id="pname" readonly="readonly"></td>
					</tr>
					<tr>
						<td><label>编码:</label></td>
						<td><input name="code" class="easyui-textbox" readonly="readonly"></td>
					</tr>
					<tr>
						<td><label>菜单名称:</label></td>
						<td><input name="text" class="easyui-textbox" data-options="required:true"></td>
					</tr>
					<tr>
						<td><label>菜单URL:</label></td>
						<td><input name="menuUrl" class="easyui-textbox"></td>
					</tr>	
					
					<tr>
						<td><label>权限控制URL:</label></td>
						<td><input name="authUrl" class="easyui-textbox"></td>
					</tr>
					<tr>
						<td><label>权限编码:</label></td>
						<td><input name="authCode" class="easyui-textbox"></td>
					</tr>
					<tr>
						<td><label>权限描述:</label></td>
						<td><input name="authDesc" class="easyui-textbox"></td>
					</tr>
					<tr>
						<td><label>菜单序号:</label></td>
						<td><input name="menuOrder" class="easyui-textbox"></td>
					</tr>
					<tr>
						<td><label>权限序号:</label></td>
						<td><input name="authOrder" class="easyui-textbox"></td>
					</tr>	
					<tr>
						<td><label>所属系统:</label></td>
						<td><input name="subSystemName" class="easyui-textbox"></td>
					</tr>
					
					<tr>
						<td><label>是否启用:</label></td>
						<td>
							<select class="easyui-combobox" data-options="editable:false,panelHeight:'auto'" name="enable">
								<option value="1">启用</option>
								<option value="0">禁用</option>
							</select>
						</td>
					</tr>	
					<tr>
						<td><label>备注:</label></td>
						<td><input name="note" class="easyui-textbox" data-options="multiline:true" style="height:60px"></td>
					</tr>
				</table>
			</form>
		</div>
		<div id="dlg-buttons">		
			<a href="#" class="easyui-linkbutton" iconCls="icon-cut" οnclick="addSubMenu()">添加子节点</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-cut" οnclick="addBrotherMenu()">添加同级节点</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-save" οnclick="saveMenu()">保存</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-no" οnclick="destroyMenu()">删除</a>
		</div>
	</div>
</div>
</body>
</html>



SHELLY_90
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
10-23
主要介绍了jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮,需要的朋友可以参考下
easyui-tree数据读取与保存
无
07-14 2695
easyui版本： jQuery EasyUI 1.4.3 工具：eclipse+mysql 注：代码有删除，因为是公司项目，主要是easyui-tree的获取及保存 表结构为：商品类型表(shop_type)---》商品表(shop)---》商品规格表(shop_standard),商品表存在商品类型id,商品规格表存在商品id step1--定
easyui中下拉树的onLoadSuccess事件，加载完成后拿到树的根节点
Linjing127218的博客
01-20 4281
在项目中，我们采用的是easyUI组件，经常会遇到下拉树组件，后面跟着查询，查询的参数是树的根节点的id,初始化页面的时候调取查询函数，可是会遇到一个问题，树的根节点的id拿不到，之前采取的方法是直接在onLoadSuccesss里面直接调取查询函数，但是后来发现异步树的展开事件也会调取查询事件，违背了设计意图了，后来的解决方案是定义一个变量,通过变量来判断eg:var _flag=true;if
java_easyui体系之Tree的加载
Oscar Chen
01-09 8132
摘要： 主要介绍如何实现三种Tree的初始化工作、并且重点叙述使用ajax动态加载树、以及初始化的时候展示全部树的结构。
点击easyui的树节点，右边加载页面内容的写法
u011600833的专栏
01-19 2597
tab.tabs('add', {                 title : node.text,                 href : "view/" + url,                 closable : true,                 // 新增记录每个tab对应jsp里的多有id                 border : false,
easyui树形菜单生成算法，及在关系型数据库中的存储方式（非递归，高效算法）
寒泉
05-02 6万+
存储结构： 生成树算法： var zNodes = []; // jinja模板 从后台取回 每一级菜单的 list { % for node in result % } var obj = new Object(); obj.id = {{ node.id }}; obj.pId = {{ node.pid }}; obj.text = '{{ node.name }}';...
jQuery EasyUI快速入门03
m0_67768699的博客
05-06 819
目录 一、权限系统 （1）访问控制策略 1、自由型访问控制 2、强制性访问控制 3、基于角色的访问控制 4、规则驱动的基于角色的访问控制 5、基于属性证书的访问控制 （2）RBAC模型 1、RBAC是什么？ 2、RBAC重要对象： （3）权限系统的组成 1、用户表 2、角色表 3、权限表 4、用户角色表 5、角色权限表 二、示例显示 （1）创建权限表（菜单表） （2）编写数据库帮助类、实体类 1、数据库帮助类 2、实体类 （3）编写数据访问层和业务逻辑层
EasyUI树形菜单的使用
收破烂的小熊猫
05-28 848
EasyUI树形菜单的使用 如图，是我制作淘淘商城时使用EasyUI制作的树形菜单，可添加和删除叶子节点。 Easyui tree的使用教程可查看官网： http://www.jeasyui.net/tutorial/52.html 这里我主要是结合后端的形式，来实现EasyUi 树形菜单的CRUD操作。 页面代码： content-catrgory.jsp <%@ page langu...
Easyui-accordion+tree实现漂亮的自定义导航菜单 SSM （oa系统）
sun_jinhang的专栏
07-22 1202
部分资源借鉴了其他博主，原文链接：https://www.cnblogs.com/ymnets/p/3824368.html 最终实现的效果图，图标都是自定义的，未使用easyui themes中的图片资源，导航菜单自动加载，使用easyui 中的 accordion + tree 实现二级菜单 导航菜单 导航菜单管理（部分功能，待完善） 菜单编辑 第一步、新建Maven项目...
jquery的tree增删改查节点操作
xclsky的博客
12-25 1451
1 首选需要添加jquery的css和js。顺序不能变（注意：有script标签。一定要有结尾。不然会出错） 如： 2 首先要有初始化tree。通过data数组可以给tree进行初始化,当然必须包括属性id、text 如果有子节点则需要有children 然后通过jquery进行tree的初始化 如：jQuery.ready=function(){ $
Easyui Tree对节点进行，添加，修改，删除操作
热门推荐
Easzz的博客
12-13 9万+
<script type="text/javascript"> $(function(){ $("#contentCategory").tree({ url : '/content/category/list', animate: true, method : "POST", onContextMenu: function(e,
给easyui tree树加图标
朱朱家园
04-04 4767
在给界面传JSON值多加个图标属性就OK了， 其中IconClass为数据库中存放的图标字段 TreeNode treeNode = new TreeNode { id = this.MenuCode , text = this.MenuName, // state =
easyui-tree 修改图标
junhua_xu的博客
08-14 2415
easyui-tree默认子节点图标是文本图标，需求则是叶子节点也要用文件夹图标。修改tree的iconCls属性不管用，不管是什么图标都不行。有用的方法是将节点的state属性的值设为‘closed’，这时突变就变成了关闭的文件夹图标。其他图标怎么不知道，路过的各位帮忙指点一下 $('#tt').tree({ onClick : function(node){ // 点击展开或折叠 ...
Easyui清除tree的选中
weixin_30615767的博客
07-27 741
//取消 所有选中 var rootNodes = treeObject.tree('getRoots'); for ( var i = 0; i < rootNodes.length; i++) { var node = treeObject.tree('find', rootNodes[i].id); treeObject.tr...
EasyUI Tree 树点击按钮打开选中
a432qbc的博客
02-09 831
js init_edit('propagandaTemplates'); show_company(); function init_edit(id) { let $dialog = $('#department_dialog'); $('.company-btn').click(function () { add_company($dialog);//点击弹出框 }); //弹出框删除按钮 $dialog.on('click', '.ic..
easyui的treegrid的子节点的formatter放入menubutton菜单按钮
weixin_33752045的博客
01-23 437
2019独角兽企业重金招聘Python工程师标准>>> ...
Tree 树形控件
weixin_30855761的博客
03-14 2642
用清晰的层级结构展示信息，可展开或折叠。 基础用法 基础的树形结构展示。 1 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> 2 3 <script> 4 export default { 5 d...
java treeset 删除_Java TreeSet remove()用法及代码示例
weixin_39922004的博客
02-19 716
Java.util.TreeSet.remove(Object O)方法用于从Tree集中删除特定元素。用法:TreeSet.remove(Object O)参数：参数O是树集的类型，并指定要从集合中删除的元素。返回值：如果参数中指定的元素最初存在于Set中并成功删除，则此方法返回True。否则，它返回False。以下示例程序旨在说明Java.util.TreeSet.remove()方法：// ...
easyui tree java
最新发布
08-15
我们可以通过对tree组件的事件进行监听，实现特定操作，比如点击节点后加载子节点、在节点上右键弹出菜单等。 总之，通过使用easyui tree组件，结合java后台开发，我们可以方便地实现树形结构的展示和交互操作，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值