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

最新推荐文章于 2022-07-04 22:51:15 发布
最新推荐文章于 2022-07-04 22:51:15 发布
阅读量886 收藏 2
点赞数 1
分类专栏： ssh项目实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wingzhezhe/article/details/77773839
版权

一、配置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>


DJTUDaker
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Net实战商用源码---ASP.NET MVC5+EasyUI企业开发框架源码
11-29
Net实战商用源码---ASP.NET MVC5+EasyUI企业开发框架源码
EasyUI环境搭建与入门基础语法
BADAO_LIUMANG_QIZHI的博客
06-03 503
场景 EasyUI中文网： http://www.jeasyui.net/ 下载： http://www.jeasyui.net/download/jquery.html 选择免费版下载，下载后解压： 实现 打开IDEA-new Project-Maven--勾选Create from archetype--选择webapp 设置自己的Maven仓库等。 建成之后...
EasyUi框架
qq_47455677的博客
07-04 727
EasyUi框架
Easyui环境创建即使用详细说明（详细图示）
qq_27794563的博客
03-26 802
1.下载 2.解压 3.web下创建一个包放置easyui前端资源 4.创建一个测试网页 test.html 并初始化easyui 或者使用js方式初始化easyui插件：选中要初始化的元素在访问js的插件名称如 tree（）： 5.给插件属性赋值(三种方式): 1.可以直接写在标签中 2.可以写在标签中的data-options中 3.可以写在js初始化的时候指定属性的值 6.基本完成...
搭建EasyUI环境
qq_35158351的博客
09-25 502
1 安装Web服务器，在http://tomcat.apache.org/download-70.cgi下载Tomcat7安装版本。安装好Tomcat后，启动Tomcat，在浏览器输入http://localhost:8080/ ，如果看到欢迎界面，表示安装成功。2 在官方网站http://www.jeasyui.com/download/index.php下载jQuery EasyUI，这里使用的
easyui环境搭建
TheB1stPR的博客
07-11 540
easyui环境搭建
jquery-easyui-themes.rar_easyui 主题_easyui主题_html_jquery_jquery-e
09-20
jquery-easyui的官方主题包，包括metro五套和ui四套
SSH框架网上商城项目第3战之使用EasyUI搭建后台页面框架
09-02
SSH框架网上商城项目第3战之使用EasyUI搭建后台页面框架,讨论两种搭建方式：基于frameset和基于easyUI，感兴趣的小伙伴们可以参考一下
SSH框架实战--个人博客
06-14
使用Struts2+Hibernate+Spring进行开发。 数据库使用的是MySql 5.7，已导出为sql文件（blog.... * 后台使用Easyui进行开发的界面 * 前台使用Bootstrap开发的界面 前台和后台交互全部通过ajax传输json来进行数据交互
dms.rar_easyui java_easyui-datagrid_jeasyui ibatis_jquery-easyui
09-24
ibatis+easyui+etmv,实现了用户管理,权限管理数据在ACCES.条码打印 自动分页 .打印数据来源于oracle数据库使用ETMV访问,需要自建
SSH框架项目学习之Ztree
12-17
学习ssh框架的ztree总结，图文并茂，非常有利于理解
SSHdemo简单实例
03-21
SSH简单示例，最最基本的框架
Ztree完整实例
01-18
ztree,ztree教程,ztree实例,ztree源码，完整实例附带jar包
日志管理系统【SSH2真实使用的项目--ztree--boostrap】---首发
06-05
真实企业架构，完整代码、jar包及注释 使用的Oracle数据库，连接用户可在 applicationContext-db.xml文件里进行修改； 运行时自动创建数据表；
zTree树形插件源码，完整实例
08-08
zTree树形插件源码，完整实例，简洁方便使用，带注释说明，希望可以帮到大家！
搭建Easy UI开发环境
XCMercy
12-16 470
下载Easy UI压缩包并解压，将压缩包下的的demo、locale、themes整个文件夹、以及jquery.easyui.min.js、jquery.min.js提取到一个单独的文件夹，如easy-ui把easy-ui文件夹拷贝到项目根目录，放哪自己决定，我是放在script文件夹下，项目目录如下：
easyUi的环境搭建以及简单应用
weixin_40609804的博客
01-08 2580
这是笔者的第一篇博客，希望能够帮到那些和我一样爱学习的人，写的不好还请大家见谅。  作为一个后端程序员，前端的布局以及样式的编写一直让我很头疼，最近学习了easyUI前端框架，发现前端也可以如此简单，自己也可以做出漂亮的页面了，话不多说，进入正题吧  首先是easyUI的环境搭建 1.第一步 先从官网http://www.jeasyui.com/download/index.php下载ea
easyui学习笔记1：搭建环境，编写hellworld
weixin_34194087的博客
03-21 109
为什么80%的码农都做不了架构师？>>> ...
介绍一下EasyUI中的data-options
最新发布
06-01
在EasyUI中，`data-options`是一种用于配置组件的属性的方法。通常情况下，我们可以在HTML标签上使用`data-options`属性，通过JSON格式来设置组件的属性。这种方式比直接在JavaScript中使用配置对象的方式更加方便，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值