`

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> 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics