代码实现
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 引入公共界面 -->
<%@
include file="common/head.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
$(function() {//頁面載入函數
$('#myTree').tree({ //加載樹的數據
url : ctx + '/data/tree_data1.json', //请求地址 servlet
animate : true,//让节点展开或者收缩显示动画效果
onDblClick : function(node) {//节点=对象
//alert(node.text); // 在用户双击的时候提示
//判断是否是子节点
var nodes =$('#myTree').tree('getChildren',node.target);
if(nodes.length==0){//说明没有子节点
var f =$('#myTab').tabs('exists',node.text);
if(!f){//说明不存在
$('#myTab').tabs('add',{
// iconCls:'icon-mini-refresh',
title:node.text, //标题
content:node.text,//内容
closable:true , //是否可关闭
iconCls:node.iconCls//图标
});
}
else{//说明存在就让对应的选中
$('#myTab').tabs('select',node.text);
}
}
}
});
})
//alert(ctx);
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',split:true"
style="height: 100px; text-align: center;">
<h1>书籍后台管理</h1>
</div>
<div data-options="region:'south',title:'南',split:true"
style="height: 100px; text-align: center;">
<h4>© 沉山工作室版权所有,违权必究</h4>
</div>
<div data-options="region:'west',title:'功能导航',split:true"
style="width: 100px;">
<!-- 左侧tree控件 -->
<ul id="myTree" class="easyui-tree">
</ul>
</div>
<div data-options="region:'center'"
style="padding: 5px; background: #fff;">
<!--中间的tabs控件 -->
<div id="myTab" class="easyui-tabs" style="width: 100%; height: 100%;">
<div data-options="iconCls:'icon-bullet-home'" title="首页" style="padding: 20px; display: none;">
<img alt="" src="images/1.jpeg"style="width: 100%;height: 100%"/>
</div>
</div>
</div>
</body>
</html>
注意导入css,不然没效果