SSH综合项目实战 -- day01 环境搭建及easyui、ztree使用介绍

一、配置Eclipse的环境

二、创建Oracle数据库中的用户以及表空间

1、创建表空间

--创建表空间，同时把数据文件也创建  
create tablespace heima_64_space   --指定表空间的名称heima_64_space  
datafile 'C:\\heima_64.dbf'        --创建数据文件  
size 100M                          --给数据文件指定大小  
autoextend on                      --给数据文件设置自动增长  
next 10M  

2、创建用户

--创建用户  user  
create user heima_64               --创建用户  heima_64 用户名  
identified by heima_64             --给用户指定密码  
default  tablespace heima_64_space --用户默认操作的表空间

3、给用户赋予权限

grant dba to heima_64 --把dba的角色赋给heima_64

三、搭建项目环境

1、环境整体架构图

2、创建公共父工程 -- common-parent

3、创建 management父工程

注意：management与parent是集成关系，不是聚合关系，因此management也是一个maven project

4、在pom.xml中导入jar包坐标

<description>所有工程的父工程，统一管理依赖</description>
<properties>
<spring.version>4.2.4.RELEASE</spring.version>
<struts2.version>2.3.24</struts2.version>
<hibernate.version>5.0.7.Final</hibernate.version>
<slf4j.version>1.6.6</slf4j.version>
<springdataredis.version>1.4.1.RELEASE</springdataredis.version>
<activemq.version>5.2.0</activemq.version>
<shiro.version>1.2.2</shiro.version>
<springdatajpa.version>1.10.4.RELEASE</springdatajpa.version>
<jedis.version>2.6.2</jedis.version>
<poi.version>3.11</poi.version>
<c3p0.version>0.9.1.2</c3p0.version>
<cxf.version>3.0.1</cxf.version>
<servlet.version>2.5</servlet.version>
<junit.version>4.11</junit.version>
</properties>

<dependencies>
<!-- 权限控制 框架 -->
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-all</artifactId>
<version>${shiro.version}</version>
</dependency>

<!-- spring 框架 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context-support</artifactId>
<version>${spring.version}</version>
</dependency>

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-orm</artifactId>
<version>${spring.version}</version>
</dependency>

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jms</artifactId>
<version>${spring.version}</version>
</dependency>

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-test</artifactId>
<version>${spring.version}</version>
</dependency>

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>${spring.version}</version>
</dependency>

<!-- spring data jpa 数据库持久层 -->
<dependency>
<groupId>org.springframework.data</groupId>
<artifactId>spring-data-jpa</artifactId>
<version>${springdatajpa.version}</version>
</dependency>

<!-- 消息队列 MQ -->
<dependency>
<groupId>org.apache.activemq</groupId>
<artifactId>activemq-all</artifactId>
<version>${activemq.version}</version>
</dependency>

<!-- struts2 框架 -->
<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-core</artifactId>
<version>${struts2.version}</version>
</dependency>
<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-spring-plugin</artifactId>
<version>${struts2.version}</version>
</dependency>
<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-convention-plugin</artifactId>
<version>${struts2.version}</version>
</dependency>

<!-- hibernate 框架 -->
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-core</artifactId>
<version>${hibernate.version}</version>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-entitymanager</artifactId>
<version>${hibernate.version}</version>
</dependency>

<!-- 数据库连接池 -->
<dependency>
<groupId>c3p0</groupId>
<artifactId>c3p0</artifactId>
<version>${c3p0.version}</version>
</dependency>

<!-- 日志框架 -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>${slf4j.version}</version>
</dependency>

<!-- 工具包 -->
<dependency>
<groupId>commons-lang</groupId>
<artifactId>commons-lang</artifactId>
<version>2.6</version>
</dependency>

<dependency>
<groupId>org.springframework.data</groupId>
<artifactId>spring-data-redis</artifactId>
<version>${springdataredis.version}</version>
</dependency>

<!-- oracle数据库驱动，需要手动安装 -->
<!-- <dependency> <groupId>com.oracle</groupId> <artifactId>ojdbc6</artifactId> 
<version>11.2.0.1.0</version> </dependency> -->
<dependency>
<groupId>com.oracle</groupId>
<artifactId>ojdbc14</artifactId>
<version>10.2.0.1.0</version>
</dependency>

<!-- Excel解析工具类 -->
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi</artifactId>
<version>${poi.version}</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml</artifactId>
<version>${poi.version}</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml-schemas</artifactId>
<version>${poi.version}</version>
</dependency>

<!-- Servlet、JSP -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>${servlet.version}</version>
<scope>provided</scope>
</dependency>

<!-- 单元测试 -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>${junit.version}</version>
<scope>test</scope>
</dependency>

<!-- 导入webservice依赖 -->
<dependency>
<groupId>org.apache.cxf</groupId>
<artifactId>cxf-rt-frontend-jaxws</artifactId>
<version>${cxf.version}</version>
</dependency>

<dependency>
<groupId>org.apache.cxf</groupId>
<artifactId>cxf-rt-transports-http</artifactId>
<version>${cxf.version}</version>
</dependency>

<dependency>
<groupId>org.apache.cxf</groupId>
<artifactId>cxf-rt-frontend-jaxrs</artifactId>
<version>${cxf.version}</version>
</dependency>

<dependency>
<groupId>org.apache.cxf</groupId>
<artifactId>cxf-rt-rs-client</artifactId>
<version>${cxf.version}</version>
</dependency>

<dependency>
<groupId>org.apache.cxf</groupId>
<artifactId>cxf-rt-rs-extension-providers</artifactId>
<version>${cxf.version}</version>
</dependency>

<dependency>
<groupId>org.codehaus.jettison</groupId>
<artifactId>jettison</artifactId>
<version>1.3.7</version>
</dependency>

<!-- 对象转为json 工具包 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.1.37</version>
</dependency>

<dependency>
<groupId>com.colobu</groupId>
<artifactId>fastjson-jaxrs-json-provider</artifactId>
<version>0.3.1</version>
</dependency>
<!-- 引入json-lib的依赖 -->
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.belerweb/pinyin4j -->
<dependency>
<groupId>com.belerweb</groupId>
<artifactId>pinyin4j</artifactId>
<version>2.5.0</version>
</dependency>
<dependency>
<groupId>javax.mail</groupId>
<artifactId>mail</artifactId>
<version>1.4</version>
</dependency>
<dependency>
<groupId>redis.clients</groupId>
<artifactId>jedis</artifactId>
<version>${jedis.version}</version>
<scope>compile</scope>
</dependency>
<!-- 缓存 -->
<dependency>
<groupId>net.sf.ehcache</groupId>
<artifactId>ehcache-core</artifactId>
<version>2.6.11</version>
</dependency>
<dependency>
<groupId>org.quartz-scheduler</groupId>
<artifactId>quartz</artifactId>
<version>2.2.1</version>
</dependency>
<dependency>
<groupId>org.quartz-scheduler</groupId>
<artifactId>quartz-jobs</artifactId>
<version>2.2.1</version>
</dependency>
<dependency>
<groupId>org.apache.xbean</groupId>
<artifactId>xbean-spring</artifactId>
<version>4.2</version>
</dependency>
</dependencies>
<build>
<pluginManagement>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.2</version>
<configuration>
<source>1.7</source>
<target>1.7</target>
<encoding>UTF-8</encoding>
<showWarnings>true</showWarnings>
</configuration>
</plugin>
</plugins>
</pluginManagement>
</build>

5、在bos_management上创建子模块，分别有domain、dao、service、utils、web

6、创建完成之后的项目架构

四、Jquery EasyUI使用简介

1、将给出的easyUI页面导入web模块工程中

2、引入easyuijs文件

<!-- 引入easyui资源文件 -->
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>

3、测试 layout 布局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<!-- 每个div表示一个区域 -->
<div title="速运快递" style="height:100px" data-options="region:'north'">北部区域</div>
<div title="系统菜单" style="width:100px" data-options="region:'west'">西部区域</div>
<div data-options="region:'center'">中部区域</div>
<div style="width:100px" data-options="region:'east'">东部区域</div>
<div style="height:50px" data-options="region:'south'">南部区域</div>

</body>
</html>

4、测试折叠面板

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<!-- 每个div表示一个区域 -->
<div title="速运快递" style="height:100px" data-options="region:'north'">北部区域</div>
<div title="系统菜单" style="width:200px" data-options="region:'west'">
<!-- 制作一个折叠面板 -->
<div class="easyui-accordion" data-options="fit:true">
<!-- 每一个div表示一个子面板 -->
<div data-options="iconCls:'icon-save'" title="面板一">面板一</div>
<div data-options="iconCls:'icon-save'" title="面板二">面板二</div>
<div data-options="iconCls:'icon-save'" title="面板三">面板三</div>
</div>
</div>
<div data-options="region:'center'">

</div>
<div style="width:100px" data-options="region:'east'">东部区域</div>
<div style="height:50px" data-options="region:'south'">南部区域</div>

</body>
</html>

5、测试选项卡面板

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<!-- 每个div表示一个区域 -->
<div title="速运快递" style="height:100px" data-options="region:'north'">北部区域</div>
<div title="系统菜单" style="width:200px" data-options="region:'west'">
<!-- 制作一个折叠面板 -->
<div class="easyui-accordion" data-options="fit:true">
<!-- 每一个div表示一个子面板 -->
<div data-options="iconCls:'icon-save'" title="面板一">面板一</div>
<div data-options="iconCls:'icon-save'" title="面板二">面板二</div>
<div data-options="iconCls:'icon-save'" title="面板三">面板三</div>
</div>
</div>
<div data-options="region:'center'">
<!-- 制作一个选项卡面板 -->
<div class="easyui-tabs" data-options="fit:true">
<!-- 每一个div表示一个选项卡 -->
<div data-options="iconCls:'icon-cut'" title="选项卡一">选项卡一</div>
<div data-options="iconCls:'icon-cut'" title="选项卡二">选项卡二</div>
<div data-options="iconCls:'icon-cut'" title="选项卡三">选项卡三</div>
</div>
</div>
<div style="width:100px" data-options="region:'east'">东部区域</div>
<div style="height:50px" data-options="region:'south'">南部区域</div>

</body>
</html>

6、动态添加选项卡

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<!-- 每个div表示一个区域 -->
<div title="速运快递" style="height:100px" data-options="region:'north'">北部区域</div>
<div title="系统菜单" style="width:200px" data-options="region:'west'">
<!-- 制作一个折叠面板 -->
<div class="easyui-accordion" data-options="fit:true">
<!-- 每一个div表示一个子面板 -->
<div data-options="iconCls:'icon-save'" title="面板一">
<a type="button" id="mybutton" class="easyui-linkbutton">添加选项卡</a>
<script type="text/javascript">
$(function(){
//页面加载完毕后执行的动作--为上面的按钮绑定点击事件
$("#mybutton").click(function(){
//判断当前选项卡是否存在
var exists = $("#mytabs").tabs("exists","测试面板");
if(exists){
//已经存在，选中即可
$("#mytabs").tabs("select","测试面板");
}else{
//不存在，调用easyui提供的方法，动态添加新的面板
$("#mytabs").tabs("add",{
title:'测试面板',
content:'1111111',
closable:true
});
}
});

});
</script>
</div>
<div data-options="iconCls:'icon-save'" title="面板二">面板二</div>
<div data-options="iconCls:'icon-save'" title="面板三">面板三</div>
</div>
</div>
<div data-options="region:'center'">
<!-- 制作一个选项卡面板 -->
<div id="mytabs" class="easyui-tabs" data-options="fit:true">
<!-- 每一个div表示一个选项卡 -->
<div data-options="iconCls:'icon-cut'" title="选项卡一">选项卡一</div>
<div data-options="iconCls:'icon-cut'" title="选项卡二">选项卡二</div>
<div data-options="iconCls:'icon-cut'" title="选项卡三">选项卡三</div>
</div>
</div>
<div style="width:100px" data-options="region:'east'">东部区域</div>
<div style="height:50px" data-options="region:'south'">南部区域</div>

</body>
</html>

五、Jquery zTree使用简介

1、配置zTree资源位置

<!-- 引入ztree资源文件 -->
<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>

2、基于简单的json数据构造zTree

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!-- 引入ztree资源文件 -->
<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>
</head>
<body class="easyui-layout">
<!-- 每个div表示一个区域 -->
<div title="速运快递" style="height:100px" data-options="region:'north'">北部区域</div>
<div title="系统菜单" style="width:200px" data-options="region:'west'">
<!-- 制作一个折叠面板 -->
<div class="easyui-accordion" data-options="fit:true">
<!-- 每一个div表示一个子面板 -->
<div data-options="iconCls:'icon-save'" title="面板一">
<a type="button" id="mybutton" class="easyui-linkbutton">添加选项卡</a>
<script type="text/javascript">
$(function(){
//页面加载完毕后执行的动作--为上面的按钮绑定点击事件
$("#mybutton").click(function(){
//判断当前选项卡是否存在
var exists = $("#mytabs").tabs("exists","测试面板");
if(exists){
//已经存在，选中即可
$("#mytabs").tabs("select","测试面板");
}else{
//不存在，调用easyui提供的方法，动态添加新的面板
$("#mytabs").tabs("add",{
title:'测试面板',
content:'1111111',
closable:true
});
}
});

});
</script>
</div>
<div data-options="iconCls:'icon-save'" title="面板二">
<!-- 提供ul标签，用来定义ztree -->
<ul id="myztree1" class="ztree"></ul>
<!-- 动态加载json中的数据，创建ztree -->
<script type="text/javascript">
//页面加载完成，执行以下动作
$(function(){
//定义一个变量，设置ztree的相关属性
var settring1 = {};
//定义节点数据
var zNodes = [
              {name:'节点1',children:[
                                    {name:'节点1_1'},
                                    {name:'节点1_2'}
                                    ]},//每一个json表示一个节点
              {name:'节点2'},
              {name:'节点3'},
              {name:'节点4'}
              ];
//调用init方法创建ztree
$.fn.zTree.init($("#myztree1"),settring1,zNodes);
});
</script>

</div>
<div data-options="iconCls:'icon-save'" title="面板三">面板三</div>
</div>
</div>
<div data-options="region:'center'">
<!-- 制作一个选项卡面板 -->
<div id="mytabs" class="easyui-tabs" data-options="fit:true">
<!-- 每一个div表示一个选项卡 -->
<div data-options="iconCls:'icon-cut'" title="选项卡一">选项卡一</div>
<div data-options="iconCls:'icon-cut'" title="选项卡二">选项卡二</div>
<div data-options="iconCls:'icon-cut'" title="选项卡三">选项卡三</div>
</div>
</div>
<div style="width:100px" data-options="region:'east'">东部区域</div>
<div style="height:50px" data-options="region:'south'">南部区域</div>

</body>
</html>

3、基于简单的json数据构造zTree

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!-- 引入ztree资源文件 -->
<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>
</head>
<body class="easyui-layout">
<!-- 每个div表示一个区域 -->
<div title="速运快递" style="height:100px" data-options="region:'north'">北部区域</div>
<div title="系统菜单" style="width:200px" data-options="region:'west'">
<!-- 制作一个折叠面板 -->
<div class="easyui-accordion" data-options="fit:true">
<!-- 每一个div表示一个子面板 -->
<div data-options="iconCls:'icon-save'" title="面板一">
<a type="button" id="mybutton" class="easyui-linkbutton">添加选项卡</a>
<script type="text/javascript">
$(function(){
//页面加载完毕后执行的动作--为上面的按钮绑定点击事件
$("#mybutton").click(function(){
//判断当前选项卡是否存在
var exists = $("#mytabs").tabs("exists","测试面板");
if(exists){
//已经存在，选中即可
$("#mytabs").tabs("select","测试面板");
}else{
//不存在，调用easyui提供的方法，动态添加新的面板
$("#mytabs").tabs("add",{
title:'测试面板',
content:'1111111',
closable:true
});
}
});

});
</script>
</div>
<div data-options="iconCls:'icon-save'" title="面板二">
<!-- 基于标准json数据构造ztree -->
<!-- 提供ul标签，用来定义ztree -->
<ul id="myztree1" class="ztree"></ul>
<!-- 动态加载json中的数据，创建ztree -->
<script type="text/javascript">
//页面加载完成，执行以下动作
$(function(){
//定义一个变量，设置ztree的相关属性
var settring1 = {};
//定义节点数据
var zNodes = [
              {name:'节点1',children:[
                                    {name:'节点1_1'},
                                    {name:'节点1_2'}
                                    ]},//每一个json表示一个节点
              {name:'节点2'},
              {name:'节点3'},
              {name:'节点4'}
              ];
//调用init方法创建ztree
$.fn.zTree.init($("#myztree1"),settring1,zNodes);
});
</script>

</div>
<div data-options="iconCls:'icon-save'" title="面板三">
<!-- 基于简单json数据构造ztree -->
<!-- 提供ul标签，用来定义ztree -->
<ul id="myztree2" class="ztree"></ul>
<!-- 动态加载json中的数据，创建ztree -->
<script type="text/javascript">
//页面加载完成，执行以下动作
$(function(){
//定义一个变量，设置ztree的相关属性
var settring2 = {
data:{
simpleData:{
enable:true //启用简单格式的json
}
}
};
//定义节点数据
var zNodes = [
              {id:'001',pId:'-',name:'节点1'},//每一个json表示一个节点
              {id:'002',pId:'-',name:'节点2'},
              {id:'003',pId:'-',name:'节点3'},
              {id:'101',pId:'001',name:'节点1_1'},
              {id:'102',pId:'001',name:'节点1_2'},
              {id:'201',pId:'002',name:'节点2_1'},
              {id:'202',pId:'002',name:'节点2_2'},
              {id:'301',pId:'003',name:'节点3_1'},
              {id:'302',pId:'003',name:'节点3_2'},
              ];
//调用init方法创建ztree
$.fn.zTree.init($("#myztree2"),settring2,zNodes);
});
</script>
</div>
</div>
</div>
<div data-options="region:'center'">
<!-- 制作一个选项卡面板 -->
<div id="mytabs" class="easyui-tabs" data-options="fit:true">
<!-- 每一个div表示一个选项卡 -->
<div data-options="iconCls:'icon-cut'" title="选项卡一">选项卡一</div>
<div data-options="iconCls:'icon-cut'" title="选项卡二">选项卡二</div>
<div data-options="iconCls:'icon-cut'" title="选项卡三">选项卡三</div>
</div>
</div>
<div style="width:100px" data-options="region:'east'">东部区域</div>
<div style="height:50px" data-options="region:'south'">南部区域</div>

</body>
</html>

4、基于ajax远程加载json数据构造zTree

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!-- 引入ztree资源文件 -->
<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>
</head>
<body class="easyui-layout">
<!-- 每个div表示一个区域 -->
<div title="速运快递" style="height:100px" data-options="region:'north'">北部区域</div>
<div title="系统菜单" style="width:200px" data-options="region:'west'">
<!-- 制作一个折叠面板 -->
<div class="easyui-accordion" data-options="fit:true">
<!-- 每一个div表示一个子面板 -->
<div data-options="iconCls:'icon-save'" title="面板一">
<a type="button" id="mybutton" class="easyui-linkbutton">添加选项卡</a>
<script type="text/javascript">
$(function(){
//页面加载完毕后执行的动作--为上面的按钮绑定点击事件
$("#mybutton").click(function(){
//判断当前选项卡是否存在
var exists = $("#mytabs").tabs("exists","测试面板");
if(exists){
//已经存在，选中即可
$("#mytabs").tabs("select","测试面板");
}else{
//不存在，调用easyui提供的方法，动态添加新的面板
$("#mytabs").tabs("add",{
title:'测试面板',
content:'1111111',
closable:true
});
}
});

});
</script>
</div>
<div data-options="iconCls:'icon-save'" title="面板二">
<!-- 基于标准json数据构造ztree -->
<!-- 提供ul标签，用来定义ztree -->
<ul id="myztree1" class="ztree"></ul>
<!-- 动态加载json中的数据，创建ztree -->
<script type="text/javascript">
//页面加载完成，执行以下动作
$(function(){
//定义一个变量，设置ztree的相关属性
var settring1 = {};
//定义节点数据
var zNodes = [
              {name:'节点1',children:[
                                    {name:'节点1_1'},
                                    {name:'节点1_2'}
                                    ]},//每一个json表示一个节点
              {name:'节点2'},
              {name:'节点3'},
              {name:'节点4'}
              ];
//调用init方法创建ztree
$.fn.zTree.init($("#myztree1"),settring1,zNodes);
});
</script>

</div>
<div data-options="iconCls:'icon-save'" title="面板三">
<!-- 基于简单json数据构造ztree -->
<!-- 提供ul标签，用来定义ztree -->
<ul id="myztree2" class="ztree"></ul>
<!-- 动态加载json中的数据，创建ztree -->
<script type="text/javascript">
//页面加载完成，执行以下动作
$(function(){
//定义一个变量，设置ztree的相关属性
var settring2 = {
data:{
simpleData:{
enable:true //启用简单格式的json
}
}
};
//定义节点数据
var zNodes = [
              {id:'001',pId:'-',name:'节点1'},//每一个json表示一个节点
              {id:'002',pId:'-',name:'节点2'},
              {id:'003',pId:'-',name:'节点3'},
              {id:'101',pId:'001',name:'节点1_1'},
              {id:'102',pId:'001',name:'节点1_2'},
              {id:'201',pId:'002',name:'节点2_1'},
              {id:'202',pId:'002',name:'节点2_2'},
              {id:'301',pId:'003',name:'节点3_1'},
              {id:'302',pId:'003',name:'节点3_2'},
              ];
//调用init方法创建ztree
$.fn.zTree.init($("#myztree2"),settring2,zNodes);
});
</script>
</div>
<div data-options="iconCls:'icon-save'" title="面板四">
<!-- 定义ul，用来构建ztree -->
<ul id="myztree3" class="ztree"></ul>
<!-- 发送ajax请求获取json数据，构造ztree -->
<script type="text/javascript">
//页面加载完成，调用ajax获取菜单数据
$(function(){
$.post(
'../data/menu.json',
function(data){
//定义一个变量，设置ztree的相关属性
var settring3 = {
data:{
simpleData:{
enable:true //启用简单格式的json
}
}
};
//调用init方法创建ztree
$.fn.zTree.init($("#myztree3"),settring3,data);
},
'json'
);
});
</script>
</div>
</div>
</div>
<div data-options="region:'center'">
<!-- 制作一个选项卡面板 -->
<div id="mytabs" class="easyui-tabs" data-options="fit:true">
<!-- 每一个div表示一个选项卡 -->
<div data-options="iconCls:'icon-cut',closable:true" title="选项卡一"></div>
<div data-options="iconCls:'icon-cut'" title="选项卡二">选项卡二</div>
<div data-options="iconCls:'icon-cut'" title="选项卡三">选项卡三</div>
</div>
</div>
<div style="width:100px" data-options="region:'east'">东部区域</div>
<div style="height:50px" data-options="region:'south'">南部区域</div>

</body>
</html>

5、为zTree节点绑定事件动态添加选项卡

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!-- 引入ztree资源文件 -->
<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>
</head>
<body class="easyui-layout">
<!-- 每个div表示一个区域 -->
<div title="速运快递" style="height:100px" data-options="region:'north'">北部区域</div>
<div title="系统菜单" style="width:200px" data-options="region:'west'">
<!-- 制作一个折叠面板 -->
<div class="easyui-accordion" data-options="fit:true">
<!-- 每一个div表示一个子面板 -->
<div data-options="iconCls:'icon-save'" title="面板一">
<a type="button" id="mybutton" class="easyui-linkbutton">添加选项卡</a>
<script type="text/javascript">
$(function(){
//页面加载完毕后执行的动作--为上面的按钮绑定点击事件
$("#mybutton").click(function(){
//判断当前选项卡是否存在
var exists = $("#mytabs").tabs("exists","测试面板");
if(exists){
//已经存在，选中即可
$("#mytabs").tabs("select","测试面板");
}else{
//不存在，调用easyui提供的方法，动态添加新的面板
$("#mytabs").tabs("add",{
title:'测试面板',
content:'1111111',
closable:true
});
}
});

});
</script>
</div>
<div data-options="iconCls:'icon-save'" title="面板二">
<!-- 基于标准json数据构造ztree -->
<!-- 提供ul标签，用来定义ztree -->
<ul id="myztree1" class="ztree"></ul>
<!-- 动态加载json中的数据，创建ztree -->
<script type="text/javascript">
//页面加载完成，执行以下动作
$(function(){
//定义一个变量，设置ztree的相关属性
var settring1 = {};
//定义节点数据
var zNodes = [
              {name:'节点1',children:[
                                    {name:'节点1_1'},
                                    {name:'节点1_2'}
                                    ]},//每一个json表示一个节点
              {name:'节点2'},
              {name:'节点3'},
              {name:'节点4'}
              ];
//调用init方法创建ztree
$.fn.zTree.init($("#myztree1"),settring1,zNodes);
});
</script>

</div>
<div data-options="iconCls:'icon-save'" title="面板三">
<!-- 基于简单json数据构造ztree -->
<!-- 提供ul标签，用来定义ztree -->
<ul id="myztree2" class="ztree"></ul>
<!-- 动态加载json中的数据，创建ztree -->
<script type="text/javascript">
//页面加载完成，执行以下动作
$(function(){
//定义一个变量，设置ztree的相关属性
var settring2 = {
data:{
simpleData:{
enable:true //启用简单格式的json
}
}
};
//定义节点数据
var zNodes = [
              {id:'001',pId:'-',name:'节点1'},//每一个json表示一个节点
              {id:'002',pId:'-',name:'节点2'},
              {id:'003',pId:'-',name:'节点3'},
              {id:'101',pId:'001',name:'节点1_1'},
              {id:'102',pId:'001',name:'节点1_2'},
              {id:'201',pId:'002',name:'节点2_1'},
              {id:'202',pId:'002',name:'节点2_2'},
              {id:'301',pId:'003',name:'节点3_1'},
              {id:'302',pId:'003',name:'节点3_2'},
              ];
//调用init方法创建ztree
$.fn.zTree.init($("#myztree2"),settring2,zNodes);
});
</script>
</div>
<div data-options="iconCls:'icon-save'" title="面板四">
<!-- 定义ul，用来构建ztree -->
<ul id="myztree3" class="ztree"></ul>
<!-- 发送ajax请求获取json数据，构造ztree -->
<script type="text/javascript">
//页面加载完成，调用ajax获取菜单数据
$(function(){
$.post(
'../data/menu.json',
function(data){
//定义一个变量，设置ztree的相关属性
var settring3 = {
data:{
simpleData:{
enable:true //启用简单格式的json
}
},
callback:{
//给节点绑定单击事件
onClick:function(event,treeId,treeNode){
//alert("点击的节点名称是：" + treeNode.name);
//根据是否有page属性判断是否需要打开页面
if(treeNode.page != undefined){


//判断当前选项卡是否存在
var exists = $("#mytabs").tabs("exists",treeNode.name);
if(exists){
//已经存在，选中即可
$("#mytabs").tabs("select",treeNode.name);
}else{
//需要打开选项卡
//调用easyui提供的tabs对象的add方法，动态添加一个选项卡
$("#mytabs").tabs("add",{
title:treeNode.name,
content:'<iframe width="100%" height="100%" style="border: 0" src="../'+treeNode.page+'"></iframe>',
closable:true
});
}
}
}
}
};
//调用init方法创建ztree
$.fn.zTree.init($("#myztree3"),settring3,data);
},
'json'
);
});
</script>
</div>
</div>
</div>
<div data-options="region:'center'">
<!-- 制作一个选项卡面板 -->
<div id="mytabs" class="easyui-tabs" data-options="fit:true">
<!-- 每一个div表示一个选项卡 -->
<div data-options="iconCls:'icon-cut',closable:true" title="选项卡一"></div>
<div data-options="iconCls:'icon-cut'" title="选项卡二">选项卡二</div>
<div data-options="iconCls:'icon-cut'" title="选项卡三">选项卡三</div>
</div>
</div>
<div style="width:100px" data-options="region:'east'">东部区域</div>
<div style="height:50px" data-options="region:'south'">南部区域</div>

</body>
</html>