easyUI添加tree菜单

最新推荐文章于 2022-09-05 15:33:13 发布

原创最新推荐文章于 2022-09-05 15:33:13 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

个人学习日志专栏收录该内容

23 篇文章

订阅专栏

本文介绍使用EasyUI框架创建动态树形菜单的方法，通过AJAX加载后台数据，解析为treeData格式，实现菜单的层级展示。点击菜单项时，通过自定义函数打开新的tab页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

treeData编辑形式：

treeData=[{
    	  text : "一级标题",
          children : [{
                  text : "二级标题",
                  children : [{
                          text : "二级标题",
                          attributes : {
                              url : ''
                          }
                      }
                  ]
              }
      }];

js:

<script type="text/javascript">
$(function(){
	loadMenu();
});

function loadMenu(){
	 $.ajax({   
	 		url: '<%=request.getContextPath()%>'+"/menu/getUserMenu",
	  		dataType : "json",   
	  		type: "post",  
	  		data:{
	  			time:new Date()
	  			},
	  		timeout: 8000,   
	  		success: function(data){
	  			var str="<ul class='easyui-tree'>";
	  			var menuList=data.menuList;
	  			var treeData=new Array();
	  			var treeObject={
	  					text:"",
	  					children:new Array()
	  			}
	  			var treeChidrenObject={
	  					text:"",
	  			        attributes:{
	  			        	url:""
	  			        }
	  			}
	  			for(var i=0;i<menuList.length;i++){
	  				treeObject={
		  					text:"",
		  					children:new Array()
		  			}
	  				treeObject.text=menuList[i].title;
	  				var list=menuList[i].list;
	  				for(var j=0;j<list.length;j++){
	  					treeChidrenObject={
	  		  					text:"",
	  		  			        attributes:{
	  		  			        	url:""
	  		  			        }
	  		  			}
	  					treeChidrenObject.text=list[j].title;
	  					treeChidrenObject.attributes.url=list[j].url;
	  					treeObject.children.push(treeChidrenObject);
	  				}
	  				treeData.push(treeObject);
	  			}
	  			console.log(treeData);
	  			$("#nav").tree({
	  		       data : treeData,
	  		       lines : true,
	  		       onClick : function (node) {
	  		         if (node.attributes) {
	  		        	addTab(node.text, node.attributes.url);
	  		           }
	  		       }
	  		   });
	  		},   
	  		error: function() {
	  			alert("异常！");
	  		}
	   	 });
}
</script>
<div>
<ul  id="nav">
</ul> 
</div>

菜单：center js:

<script type="text/javascript">
function addTab(title, url){
	/* if ($('#centerTabs').tabs('exists', title)){
		$('#centerTabs').tabs('select', title);
	} else { */
		var path='<%=request.getContextPath()%>';
		var content = '<iframe scrolling="auto" frameborder="0"  src="'+path+url+'" style="width:100%;height:100%;"></iframe>';
		$('#centerTabs').tabs('add',{
			title:title,
			content:content,
			closable:true
		});
	/* } */
}
</script>
<div id="centerTabs" class="easyui-tabs" style="width:100%;height:100%;">
</div>

布局layout.jsp：