`

EasyUI 生成Tree ,并点击打开一个Tab

 
阅读更多
function init() {
	var treeData = [ {
		text : "菜单",
		children : [ {
			text : "一级菜单1",
			attributes : {
				url : "editDataGrid2.do"
			}
		}, {
			text : "一级菜单2",
			attributes : {
				url : ""
			}
		}, {
			text : "一级菜单3",
			state : "closed",
			children : [ {
				text : "二级菜单1",
				attributes : {
					url : ""
				}
			}, {
				text : "二级菜单2",
				attributes : {
					url : ""
				}
			}, {
				text : "二级菜单3",
				attributes : {
					url : ""
				}
			} ]
		} ]
	} ];
	
	
    //实例化树形菜单
    $("#tree").tree({
        data : treeData,
        lines : true,
        onClick : function (node) {
            if (node.attributes) {
                Open(node.text, node.attributes.url);
            }
        }
    });
    
    //在右边center区域打开菜单,新增tab
    function Open(text, url) {
    	var contents ='<iframe id="tabs_'+text+'" scrolling="auto" frameborder="0" src="" style="width:100%; height:99%">fdfdf</iframe>';
        if ($("#tabs").tabs('exists', text)) {
            $('#tabs').tabs('select', text);
        } else {
            $('#tabs').tabs('add', {
                title : text,
                closable : true,
                content : contents
            });
        }
        $("#tabs_"+text).attr("src", url);//redEx.do //url
    }
}

  

	<div region="west" class="west" title="NAVIGATION">
		<ul id="tree"></ul>
	</div>

 

 	<div id="conter" data-options="region:'center'" style="overflow:hidden;">
		<div id="tabs" class="easyui-tabs" data-options="fit:true,border:false" style="border: 0px solid;width: 100%; height: 100%;">
</div>
</div> 

 

分享到:
评论

相关推荐

    easyui页面布局示例

    EasyUI 是一个基于 jQuery 的 UI 框架,它提供了丰富的组件和易于使用的主题,用于快速构建美观且功能强大的 Web 应用程序。在“easyui页面布局示例”中,我们将探讨如何利用 EasyUI 实现高效且直观的页面布局,并...

    jquery_easyui 很全面中文文档

    jQuery EasyUI 是一个基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 控件来帮助开发者快速构建用户界面。这些控件不仅功能强大而且易于使用,极大地简化了前端开发工作。 #### 二、jQuery EasyUI 控件概述 ...

    jQuery EasyUI结合zTree树形结构制作web页面

    同时,还需要定义一个回调函数,用于处理节点被点击时的事件,例如弹出新窗口或者在Tab面板中加载内容。 ```javascript var setting = { view: {selectedMulti: false}, edit: {enable: true}, data: {simple...

    JQuery EasyUI 结合ztrIee的后台页面开发实例

    在上述代码中,`zTreeOnClick`函数会根据用户点击的节点,动态创建一个iframe或者在zTree的tab页中加载相应的内容。这使得开发者可以轻松地为每个节点绑定具体的页面内容。 在实际开发中,开发者需要根据自己的需求...

    JEECG UI标签文档v3.7

    总结来说,JEECG UI标签库为开发者提供了一系列方便快捷的UI组件和功能标签,极大地简化了前端开发的工作量,提高了开发效率。无论是数据展示、表单验证还是国际化支持等功能,都可以通过这些标签轻松实现。通过以上...

    【尚硅谷】徐靖博 最新电商项目实战(完结)

    G 39.12 easyui手风琴控件介绍1 X/ X# \' k% x2 N 40.13 tree控件 41.14 tab控件: U, |: a! S7 ?: A$ t1 ?, G 42.1.properties% C2 @ d! }9 Z& ^2 c 43.2.主键9 D3 f9 W4 J* C" B4 M 44.3. 锚点. F( v2 C8 q- I# F+...

Global site tag (gtag.js) - Google Analytics