案例的使用:
案例的引入
公共页面:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 引入页面 包含 -->
<%@ include file="commom/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(){
//加载数的数据 ajax
$('#myTree').tree({
url:'data/tree_data1.json', //请求地址 servlet
animate:true,//节点显示动画效果
onDblClick: function(node){//节点=对象
//alert(node.text); // 在用户双击的时候提示
//alert(node.iconCls);
//判断是否是子节点
//拿到的是所有的后代节点集合
var nodes=$('#myTree').tree('getChildren',node.target);
//alert(nodes.length);
//判断选项卡是否存在
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);
}
}
}
});
})
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',split:true" style="height:85px;text-align:center;">
<h1>书籍后台管理</h1>
</div>
<div data-options="region:'south',split:true" style="height:68px;text-align:center;">
<h4>©沉山工作室版权所有,维权使用必究</h4>
</div>
<div data-options="region:'west',title:'功能导航',split:true" style="width:150px;">
<!-- 左侧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:10px;display:none;">
<img src="images/1.jpg" style="width:100%;height:100%;"/>
</div>
</div>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 引入页面 包含 -->
<%@ include file="commom/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(){
//加载数的数据 ajax
$('#myTree').tree({
url:'data/tree_data1.json', //请求地址 servlet
animate:true,//节点显示动画效果
onDblClick: function(node){//节点=对象
//alert(node.text); // 在用户双击的时候提示
//alert(node.iconCls);
//判断是否是子节点
//拿到的是所有的后代节点集合
var nodes=$('#myTree').tree('getChildren',node.target);
//alert(nodes.length);
//判断选项卡是否存在
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);
}
}
}
});
})
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',split:true" style="height:85px;text-align:center;">
<h1>书籍后台管理</h1>
</div>
<div data-options="region:'south',split:true" style="height:68px;text-align:center;">
<h4>©沉山工作室版权所有,维权使用必究</h4>
</div>
<div data-options="region:'west',title:'功能导航',split:true" style="width:150px;">
<!-- 左侧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:10px;display:none;">
<img src="images/1.jpg" style="width:100%;height:100%;"/>
</div>
</div>
</div>
</body>
</html>
主界面
[{
"id":1,
"text":"My Documents",
"iconCls":"icon-heart",
"children":[{
"id":11,
"text":"Photos",
"children":[{
"id":111,
"iconCls":"icon-cart",
"text":"Friend"
},{
"id":112,
"iconCls":"icon-heart",
"text":"Wife"
},{
"id":113,
"iconCls":"icon-heart",
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}]
tree的代码使用
运行的界面展示