没搞过前端，前端真的太难了，所以都记录下来
想要左边是树结构，点击树的叶子结点右边出现一个tab显示数据的效果，如下图：
实现记录如下：
jsp页面<body>代码：
<body class="easyui-layout">
<!-- 左边树形布局 -->
<div data-options="region:'west',title:'Left',split:true,collapsible:false" style="width:150px;padding:10px">
<ul id='home-tree'></ul>
</div>
<!-- 右边显示内容 -->
<div data-options="region:'center',title:'Right'" style="padding:5px">
<div id="tree-tabs" class="easyui-tabs" fit="true" border="false">
<div title="home" closable="true">welcome</div>
</div>
</div>
</body>
js代码：
url就是获取获取后台的数据
$(function(){
$('#home-tree').tree({
url : 'http://localhost:8080/XX/XXX',
onLoadSuccess: function(node, data){
},
onClick:function(node){
if( $('#home-tree').tree('isLeaf', node.target)){
addTab(node.text, 'XX.jsp?XX='+node.id);
}
}
});
function addTab(title, url){
if ($('#tree-tabs').tabs('exists', title)){
$('#tree-tabs').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#tree-tabs').tabs('add',{
title:title,
content:content,
closable:true
});
}
}
$('#tree-tabs').tabs('select','home');
});
参考链接：