easyui02

一、tree控件的使用

首先创建一个文件夹把我们要用的JSON格式的模块导入

 然后我们导入要用的tree代码

<ul id="myTree" class="easyui-tree">

</ul>

二、tabs控件的使用 

<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>  

这是基本的tabs代码（上面）

<script type="text/javascript">
	/* alert(ctx); --弹出路径*/
	$(function() {
		$('#myTree').tree({
			url : ctx + '/data/tree_data1.json',//请求地址  ajax 
			animate : true,//折叠或者展开是否展示动画效果
			onDblClick : function(node) {
				//alert(node.text+"   "+node.id+"  "+node.state);// 在用户点击的时候提示
				/* n */
				var cs=$('#myTree').tree('getChildren',node.target);
				if(cs.length==0){//没有后代节点
					/* 判断是否存在 */				
					var f = $('#myTab').tabs('exists',node.text);
					if(!f){//不存在
						//新打开一个选项卡（tab页）
						$('#myTab').tabs('add',{    
						    title:node.text,//标题  
						    content:node.text,//内容
						    closable:true,//是否可关闭   
						    iconCls:node.iconCls,
						});  
					}
					else{//说明存在  让其对应选中
						var k = $('#myTab').tabs('select',node.text);
					}
				}
				
			}
		});
	})
</script>

这是在基础加强后的代码