EasyUI之tree与tabs的前端实现

 目标：利用tree与tabs来实现前端

一，制作树形菜单（打开api文件，找到树形控件，写入我们的项目中）

 放入菜单区域面板

 导入json格式文件

 tree_data1.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",
			"attributes":{
				"url":"demo1.jsp",
				"p2":"Custom Attribute2"
			}
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"url":"demo2.jsp",
				"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"
	}]
}]

新建index.js文件（使用File处理来自WebContent的JSON数据）

$('#tt').tree({    
    url:'tree_data1.json'   
});  

二，制作选项卡（放入内容区域模板）

   <!-- 内容面板    -->
    <div data-options="region:'center',title:'内容面板'" style="padding:5px;background:#eee;">
    
    <div id="stuTabs" class="easyui-tabs" style="width:100%;height:100%;">   
    
	</div>  

制作tab页（新建俩个jsp页面）

三，点击左侧菜单显示右侧tab

3.1，给菜单添加点击事件

 3.2，打开选项卡并打开对应的页面展示

$('#tt').tabs('add',{    
    title:'node.text',    
    content:node.text+'Tab Body',    
    closable:true,    
    tools:[{    
        iconCls:'icon-mini-refresh',    
        handler:function(){    
            alert('refresh');    
        }    
    }]    
});  

四，优化

4.1，不能打开重复的tab页面  解决方法：拿到目前所有打开的tab选项卡，与将要打开的选项卡做对比（exists）存在true  不打开   存在false  打开

4.2，对应已经存在的tab选项，被点击的时候应该默认被选中

node.text  获取text的值    node.attributes.url  获取点击事件下的url的值

<iframe></iframe>此标签是：嵌入页面

方法：

select  选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。

exists  表明指定的面板是否存在，'which'参数可以是选项卡面板的标题或索引。

$(function() {
	$('#stuMenu').tree({
		url : 'tree_data1.json',
		
		onClick : function(node) {
//			alert(node.text);
//          判断当前要打开的选项卡是否存在
			var exists = $('#stuTabs').tabs('exists',node.text);
			if(exists){
				$('#stuTabs').tabs('select',node.text);
			}else{
				$('#stuTabs').tabs('add', {
					title : node.text,
					content : '<iframe width="100%" height="100%" src="'+node.attributes.url+'"></iframe>',
					closable : true,
					tools : [{
						iconCls : 'icon-mini-refresh',
						handler : function() {
							alert('refresh');
						}
					}]
				});
			}
			
		}
	
	});
})

结果展示：

  OK!  到这已经结束了，希望能帮到你！！！