沒搞過前端，前端真的太難了，所以都記錄下來
想要左邊是樹結構，點擊樹的葉子結點右邊出現一個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');
});
參考鏈接：