一、tree的使用

1.在demo文件中找到tree

2.打开tree文件夹，将josn文件复制到web项目中

 

3.在左边菜单栏里面使用代码：

<ul id="tt"></ul> 

 4.在js目录下建一个文本 index.js

5.将api的代码复制index.js里面

$('#tt').tree({    
    url:'tree_data.json1'   
}); 

注意：url要与复制的josn文件一致，$()要与界面的id一致

运行项目

 这样就将tree使用成功啦！

给tree添加点击事件：

在api找到onclick方法

 在js文件里面添加进去

$(function() {
	
	$('#menu').tree({    
		url:'tree_data1.json',
		onClick: function(node){
			alert(node.text);  // 在用户点击的时候提示
		}
	}); 
})

运行结果为

出现弹框说明成功

二、tabs的使用 

1.找到api的tabs组件

2.将代码复制到内容区

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        tab3    
    </div>   
</div> 

运行结果为

 但是为了方便填入我们想要的数据，我们会选择用另一种方式

3.在js文件里面导入代码

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

注意id要与第二步的一致

在jsp界面将width和height改为100%

运行结果为

这样就算成功啦！

但是我们要与tree联系起来，那么就把添加tabs的代码写到tree的onclick里面

$(function() {
	
	$('#menu').tree({    
		url:'tree_data1.json',
		onClick: function(node){

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

但是这样会出现一个bug，当我连续打开同一个文件时右边会出现很多个标签

 就像这样，怎样解决它呢？那么就来到我们的第四步

4.拿到目前所有打开的tabs选项卡，与将要打开的选项卡做对比（exists）

$(function() {
	
	$('#menu').tree({    
		url:'tree_data1.json',
		onClick: function(node){
			//打开的tabs中是否存在点击的那个
			var exists=$("#tabs").tabs('exists',node.text);
			if(exists){
				
			}else{
				//增加一个tabs
				$('#tabs').tabs('add',{    
					title:node.text,    
					content:node.text+'Tab Body',    
					closable:true,    
					tools:[{    
						iconCls:'icon-mini-refresh',    
						handler:function(){    
							alert('refresh');    
						}    
					}]    
				}); 
			}
			    
		}
	}); 
	
})

5.对于已经存在的tabs选项，被点击的时候应该默认被选中

在上面代码 if 条件里增加代码

$("#tabs").tabs('select',node.text);

添加select方法，后面的参数为标题

6.内容区应该为页面的切换

首先需要修改content属性：

'<iframe width="100%" height="100%" src="'+node.attributes.url+'"></iframe>'

在josn文件中修改对应的url即可

 运行结果为

 使用成功啦！！！