一、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>
这是在基础加强后的代码