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

代码怎么敲啊

已于 2022-04-06 20:17:50 修改

阅读量1.1k

点赞数

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

于 2022-04-06 20:17:17 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_56996467/article/details/123998661

版权

easyui 专栏收录该内容

6 篇文章

订阅专栏

一、准备工作

二、树形菜单

P1、json测试数据

一、准备工作

1、将EasyUI的css样式和js库都导入到项目中

二、树形菜单

HTML代码：

<body class="easyui-layout">
	<div data-options="region:'north',title:'芜湖',split:true"
		style="height: 100px;"></div>
	<div data-options="region:'west',title:'功能导航',split:true"
		style="width: 200px;">
		<ul id="funcTree"></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是上下文参数，作为绝对路径使用，详细可以查看上一章EasyUI
			url : ctx + '/data/tree_data1.json',//拿到json里面的数据用作于树形菜单
            //双击事件
			onDblClick : function(node) {
                //判重，如果为false即可以添加新的tab
				if(!$("#tt").tabs('exists',node.text)){
					$('#tt').tabs('add', {
						title:node.text,
						content:node.text,
						closable:true
					});
                //如果为true，证明已经存在，就移动到指定的tab
				}else{
					$('#tt').tabs('select',node.text)
				}
			}
		});
	})
</script>

运行效果：

P1、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"
	}]
}]