EasyUI(树形菜单、动态添加tab)

最新推荐文章于 2024-09-26 10:23:34 发布

এ 清ོ眸ꦿ℘゜

最新推荐文章于 2024-09-26 10:23:34 发布

阅读量1.4k

点赞数 1

分类专栏： easyui 文章标签： easyui

本文链接：https://blog.csdn.net/qq_63845026/article/details/124000197

版权

easyui 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<body class="easyui-layout">   
    <div data-options="region:'north',split:true" style="height:100px;"></div>   
    <div data-options="region:'west',title:'功能导航',split:true" style="width:150px;">
		<ul id="funcTree" class="easyui-tree"></ul>  
    </div>   
    <div data-options="region:'center'" style="padding:5px;background:#eee;">	
	    <div id="tt" class="easyui-tabs" style="width:100%;height:100%;">   
		    <div title="首页" style="padding:20px;display:none;">   
		        	首页    
		    </div>   
		</div>  
    </div>   
	<div data-options="region:'south',split:true" style=" text-align:center;height:30px;background: #E0ECFF" class="panel-title">
    	Copyright@XXXX有限责任公司
    </div>
</body>

jQuery代码：

<script type="text/javascript">
$(function(){
	$("#funcTree").tree({
		 //ctx是上下文参数，作为绝对路径使用
		url:ctx + '/data/tree_data1.json',//树数据的请求地址
        //双击事件
		onDblClick:function(node){
			 //判重，如果为false就添加新的tab页
			if(!$("#tt").tabs("exists",node.text)){
				// add a new tab panel    
				$('#tt').tabs('add',{    
				    title:node.text,    
				    content:node.text,    
				    closable:true    
				});  
			}else{
				//反之为true，选择一个选项卡面板
				$("#tt").tabs("select",node.text)
			}
		}
	});
})
</script>

树数据请求地址

然后在WebContent建一个文件夹，把json文件复制进去即可，如图，

这些就是json里面的测试数据，后面理应换成数据库的数据

[{
	"id":1,
	"text":"My Documents",
	"children":[{
		"id":11,
		"text":"Photos",
		"state":"closed",
		"children":[{
			"id":111,
			"text":"Friend"
		},{
			"id":112,
			"text":"Wife"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"Program Files",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

效果图: