首先通过一张图来了解到一些前端工作
通过上一篇文章 中的 API文档我们可以将其运用到代码中去
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 引入公共页面 -->
<%@ include file="common/head.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
$('#myTree').tree({
url:ctx+'/data/tree_data1.json' ,//请求地址 Ajax
animate:true ,//折叠或者展开的时候是否有动画效果
onDblClick: function(node){
//alert(node.text); // 在用户双击的时候提示
//拿到后代节点的集合
var cs = $('#myTree').tree('getChildren',node.target);
//alert(cs);
if(cs.length==0){//没有后代节点
var f = $('#myTab').tabs('exists',node.text);
//判断是否存在
if(!f){//说明不存在
//新打开一个选项卡(tab页)
$('#myTab').tabs('add',{
title:node.text,//标题
content:node.text, //内容
closable:true, //是否可关闭
/* tools:[{
iconCls:'icon-ok',
handler:function(){
alert('想干啥就干啥');
}
}]*/
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:60px;text-align:center;">
<b>©玉渊工作室所有,未经允许不可擅自使用</b>
</div>
<div data-options="region:'west',title:'功能导航',split:false" style="width:200px;">
<!--左侧 tree控件 -->
<ul id="myTree" class="easyui-tree">
</ul>
</div>
<div data-options="region:'center'" style="padding:5px;background:#fff;">
<!--中间的tab控件 -->
<div id="myTab" data-options="pill:true" class="easyui-tabs" style="width:100%;height:100%;">
<div data-options="iconCls:'icon-application-home'" title="首页" style="padding:20px;display:none;">
<img src="images/1.jpeg" width="100%" height="100%">
</div>
</div>
</div>
</body>
</html>
head.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
//System.out.print(path); /easyui01
request.setAttribute("ctx",path);//${ctx}
//String a = (String) request.getAttribute("ctx");
//System.out.print(a); //System.out.print(path);
%>
<script type="text/javascript">
var ctx = '${ctx}';
</script>
<!--引入easyui的css -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/>
<!--引入easyui的图标库 -->
<link rel="stylesheet" type="text/css" href="${ctx}/js/jquery-easyui-1.5.5.2/themes/icon.css"/>
<!--引入jQuery类库 -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.min.js"></script>
<!--引入easyui类库 -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
<!--引入easyui的语言包 支持中文 -->
<script type="text/javascript" src="${ctx}/js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
<!-- 页面缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
效果图:
左侧的数据来自easy案例中的JSON
[{
"id":1,
"text":"My Documents",
"iconCls":"icon-heart",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend",
"iconCls":"icon-chart-organisation"
},{
"id":112,
"text":"Wife",
"iconCls":"icon-book"
},{
"id":113,
"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"
}]
}]