easyui 点击tree 叶子那种 tab显示

[sunny_na56]

大家好 谁做过 贴些代码把

我url:"tree_data.json"

加载的 json数据 不是动态的那种

[sunny_na56]

顶一下

[luckxiaot11]

我做过,详细描述一下需求,我给你贴代码

[sunny_na56]

就是 tree多个节点 点击 左侧 tab显示 内容

我 想看你json咋写 和详细代码 谢了

[luckxiaot11]

这是静态的,动态的话可以自己设计.

// 菜单json
var _menus = {
	"menus" : [ {
		"menuid" : "1",
		"icon" : "icon-sys",
		"menuname" : "系统管理",
		"menus" : [ {
			"menuid" : "12",
			"menuname" : "测试页面",
			"icon" : "icon-add",
			"url" : "/jquery_easyui/views/test.jsp"
		}, {
			"menuid" : "13",
			"menuname" : "用户管理",
			"icon" : "icon-users",
			"url" :  "/jquery_easyui/views/sys/user/user.jsp"
		}, {
			"menuid" : "14",
			"menuname" : "角色管理",
			"icon" : "icon-role",
			"url" : "demo2.html"
		}, {
			"menuid" : "15",
			"menuname" : "权限设置",
			"icon" : "icon-set",
			"url" : "demo.html"
		}, {
			"menuid" : "16",
			"menuname" : "系统日志",
			"icon" : "icon-log",
			"url" : "demo1.html"
		} ]
	}  ]
	} ]
};


$(function(){
	InitLeftMenu();
	tabClose();
	tabCloseEven();

})

//初始化左侧
function InitLeftMenu() {
	$("#nav").accordion({animate:false});

    $.each(_menus.menus, function(i, n) {
		var menulist ='';
		menulist +='<ul>';
        $.each(n.menus, function(j, o) {
			menulist += '<li><div><a ref="'+o.menuid+'" href="#" rel="' + o.url + '" ><span class="icon '+o.icon+'" > </span><span class="nav">' + o.menuname + '</span></a></div></li> ';
        })
		menulist += '</ul>';

		$('#nav').accordion('add', {
            title: n.menuname,
            content: menulist,
            iconCls: 'icon ' + n.icon
        });

    });

	$('.easyui-accordion li a').click(function(){
		var tabTitle = $(this).children('.nav').text();

		var url = $(this).attr("rel");
		var menuid = $(this).attr("ref");
		var icon = getIcon(menuid,icon);

		addTab(tabTitle,url,icon);
		$('.easyui-accordion li div').removeClass("selected");
		$(this).parent().addClass("selected");
	}).hover(function(){
		$(this).parent().addClass("hover");
	},function(){
		$(this).parent().removeClass("hover");
	});

	//选中第一个
	var panels = $('#nav').accordion('panels');
	var t = panels[0].panel('options').title;
    $('#nav').accordion('select', t);
}
//获取左侧导航的图标
function getIcon(menuid){
	var icon = 'icon ';
	$.each(_menus.menus, function(i, n) {
		 $.each(n.menus, function(j, o) {
		 	if(o.menuid==menuid){
				icon += o.icon;
			}
		 })
	})

	return icon;
}

function addTab(subtitle,url,icon){
	if(!$('#tabs').tabs('exists',subtitle)){
		$('#tabs').tabs('add',{
			title:subtitle,
			content:createFrame(url),
			closable:true,
			icon:icon
		});
	}else{
		$('#tabs').tabs('select',subtitle);
		$('#mm-tabupdate').click();
	}
	tabClose();
}

function createFrame(url)
{
	var s = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
	return s;
}