<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="easyui/demo.css">
<!--<link rel="stylesheet" type="text/css" href="css/common.css">-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
var treeData=[{
text:"基本信息管理",
state:"open",
iconCls:"icon-menu",
children:[{
text:"商品管理",
iconCls:"icon-goods",
attributes:{
url:"jsp/GoodsManager.jsp"
}
},{
text:"供应商管理",
iconCls:"icon-provider",
attributes:{
url:"jsp/ProviderManager.jsp"
}
},{
text:"员工管理",
iconCls:"icon-employee",
attributes:{
url:"jsp/EmployeeManager.jsp"
}
}]
},{
text:"出入库管理",
state:"open",
iconCls:"icon-pencil",
children:[{
text:"商品入库",
iconCls:"icon-instore",
attributes:{
url:"jsp/InGoods.jsp"
}
},{
text:"商品售出",
iconCls:"icon-outstore",
attributes:{
url:"jsp/OutGoods.jsp"
}
},{
text:"库存查询",
iconCls:"icon-zoom",
attributes:{
url:"jsp/Stock.jsp"
}
}]
},{
text:"查询统计",
state:"open",
iconCls:"icon-chart",
children:[{
text:"流水账查询",
iconCls:"icon-daybook",
attributes:{
url:"jsp/DayBookQuery.jsp"
}
},{
text:"收支统计",
iconCls:"icon-account",
attributes:{
url:"jsp/AccountStatistics.jsp"
}
},{
text:"商品销售统计",
iconCls:"icon-sell",
attributes:{
url:"jsp/SellStatistics.jsp"
}
}]
},{
text:"售后服务",
state:"open",
iconCls:"icon-girl",
children:[{
text:"维修记录",
iconCls:"icon-repair",
attributes:{
url:"jsp/RepairRecords.jsp"
}
}]
}];
//实例化树
$("#tree").tree({
data:treeData,
lines:true,
onClick:function(node){
if(node.attributes){
openTab(node.text,node.attributes.url);
}
}
});
function openTab(text,url){
if($("#tabs").tabs(‘exists‘,text)){
$("#tabs").tabs(‘select‘,text);
}else{
var content="<iframe frameborder=‘0‘ scrolling=‘auto‘ style=‘width:100%;height:100%;‘ src="+url+"></iframe>";
$("#tabs").tabs(‘add‘,{
title:text,
closable:true,
content:content
});
}
}
});
</script>
</head>
<body>
<div class="easyui-layout" style="width:1000px;height:800px;margin:auto">
<div data-options="region:‘north‘" style="height:50px">
</div>
<div data-options="region:‘south‘,split:true" style="height:50px;">
</div>
<div data-options="region:‘east‘,split:true" title="East" style="width:100px;">
</div>
<div data-options="region:‘west‘,split:true" title="West" style="width:150px;">
<div id="tree"></div>
</div>
<div data-options="region:‘center‘,title:‘Main Title‘">
<!--<div data-options="region:‘center‘,title:‘Main Title‘,iconCls:‘icon-ok‘">-->
<div class="easyui-tabs" fit="true" border="false" id="tabs" >
</div>
</div>
</div>
</body>
</html>
原文：http://www.cnblogs.com/cyh2009/p/4623292.html