===项目一day01:EasyUI【静态页面创建】手写基础小结【后台界面搭建过程从0到有的过程】（已补全）

于 2017-10-25 09:06:39 发布
阅读量324 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20597149/article/details/78337063
版权

======后台界面搭建过程从0到有的过程。

===博客目的：

====素材提供。不必自己找====这里主要复习 思想 和EasyUI 基础语法

1、布局

ui01_layout.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!-- 导入默认主题CSS文件 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css"/>
<!--  导入图标CSS文件 -->
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css"/>
<!--  导入国际化信息文件 -->
<script src="../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

<!-- ====素材提供。不必自己找====这里主要复习 思想。和EasyUI语法 -->

</head>
<body class="easyui-layout">
<!-- 	<div class="easyui-layout"> -->
		<div title="东"  data-options="region:'east'" style="width:200px;height:200px"></div>
		<div title="西"  data-options="region:'west'" style="width:200px;height:200px"></div>
		<div title="南"  data-options="region:'south'" style="width:200px;height:50px"></div>
		<div title="北"  data-options="region:'north'" style="width:200px;height:100px"></div>
		<div title="中"  data-options="region:'center'" style="width:200px;height:200px"></div>
<!-- 	</div> -->
</body>
</html>

2、加上：左侧目录栏：手风琴效果（伸缩）

ui02_accordion.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!-- 导入默认主题CSS文件 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css"/>
<!--  导入图标CSS文件 -->
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css"/>
<!--  导入国际化信息文件 -->
<script src="../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
</head>
<!-- ===easyui-layout:布局  效果 -->
<body class="easyui-layout">
<!-- 	<div class="easyui-layout"> -->
		<div title="东"  data-options="region:'east'" style="width:200px;height:200px"></div>
		<div title="西"  data-options="region:'west'" style="width:200px;height:200px">
				<!-- fit="true":让easyui-accordion填满父容器div -->
				<!-- <div class="easyui-accordion" fit="true">==》改良：属性放在data-options里。
					===data-options作用：【把组件的属性统统放在这里，统一管理属性（任意组件）】
				 -->
			<div class="easyui-accordion" data-options="fit:true">
<!-- 				===easyui-accordion:手风琴 效果
				<div title="面板一" class="easyui-according"></div> -->
				<div title="面板一" style="height:150px">
					有内容伸缩效果才明显
					有内容伸缩效果才明显
					有内容伸缩效果才明显
					有内容伸缩效果才明显
				</div>
				<div title="面板二" style="height:150px">
					有内容伸缩效果才明显
					有内容伸缩效果才明显
					有内容伸缩效果才明显
					有内容伸缩效果才明显
				</div>
			</div>
		</div>
		<div title="南"  data-options="region:'south'" style="width:200px;height:50px"></div>
		<div title="北"  data-options="region:'north'" style="width:200px;height:100px"></div>
		<div title="中"  data-options="region:'center'" style="width:200px;height:200px">
			
		</div>
</body>
</html>
3、加上：点击左侧，中部添加选项卡tab

ui03_tabs.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!-- 导入默认主题CSS文件 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css"/>
<!--  导入图标CSS文件 -->
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css"/>
<!--  导入国际化信息文件 -->
<script src="../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

<script type="text/javascript">
	//===API 把tool 的handler函数放在页面。【习惯上还是 放在js脚本里】
	/* function reload(){  			
    alert('重新加载新数据')  		
   } */  
   
   function reload(){ 
		
		alert('reload'); 
		
		} 


</script>
</head>
<!-- ===easyui-layout:布局  效果 -->
<body class="easyui-layout">
<!-- 	<div class="easyui-layout"> -->
		<div title="东"  data-options="region:'east'" style="width:200px;height:200px"></div>
		<div title="西"  data-options="region:'west'" style="width:200px;height:200px">
				<!-- fit="true":让easyui-accordion填满父容器div -->
				<!-- <div class="easyui-accordion" fit="true">==》改良：属性放在data-options里。
					===data-options作用：【把组件的属性统统放在这里，统一管理属性（任意组件）】
				 -->
			<div class="easyui-accordion" data-options="fit:true">
<!-- 				===easyui-accordion:手风琴 效果
				<div title="面板一" class="easyui-according"></div> -->
				<div title="面板一" style="height:150px">
					有内容伸缩效果才明显
					有内容伸缩效果才明显
					有内容伸缩效果才明显
					有内容伸缩效果才明显
				</div>
				<div title="面板二" style="height:150px">
					有内容伸缩效果才明显
					有内容伸缩效果才明显
					有内容伸缩效果才明显
					有内容伸缩效果才明显
				</div>
			</div>
		</div>
		<div title="南"  data-options="region:'south'" style="width:200px;height:50px"></div>
		<div title="北"  data-options="region:'north'" style="width:200px;height:100px"></div>
		<div title="中"  data-options="region:'center'" style="width:200px;height:200px">
			<!-- 复制easyui-accordion代码，改改。。。。 -->
			<div class="easyui-tabs" data-options="fit:true">
			
				<!-- iconCls：图片样式class；==【 data-options="closable:true;iconCls:icon-reload"效果显示不出来】 -->
 				<!-- ==静态reload图标：
 				<div title="面板一" iconCls="icon-reload" data-options="closable:true">  -->
 				<!-- ==动态reload图标：iconCls的值少了单引号，出不来
 				<div title="面板一"  data-options="closable:true,tools[{iconCls:icon-reload,handler:reload}]"> -->
 				
  				<!-- 错误：少个冒号	tools[{	iconCls:'icon-reload',handler:function(){ 
 						===================ok ===改动  -->
 				<div title="面板一"  
 					data-options="closable:true,
 					tools:[{ 
						iconCls:'icon-reload', 
						
						handler : reload
						
						}] 
 					
 					">
					tabs内容
					tabs内容
					tabs内容
					tabs内容
					tabs内容
				</div>
				<div title="面板二" >
					tabs内容
					tabs内容
					tabs内容
					tabs内容
					tabs内容
				</div>
			</div>
		</div>
</body>
</html>

4、加上：点击左侧目录选项，右侧添加选项卡。但是tab已存在就选中，不存在才添加。
ui04_tabs_add.html 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!-- 导入默认主题CSS文件 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css"/>
<!--  导入图标CSS文件 -->
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css"/>
<!--  导入国际化信息文件 -->
<script src="../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

<script type="text/javascript">
	//===API 把tool 的handler函数放在页面。【习惯上还是 放在js脚本里】
	/* function reload(){  			
    alert('重新加载新数据')  		
   } */  
   
   function reload(){ 
		alert('reload'); 
	} 
   // ===我的方式：V1
 function addTab_V1(){ 
		
		$("#myTab").tabs('add',{ 

			title:'New Tab', 

			content:'Tab Body', 

			closable:true, 

			tools:[{ 

			iconCls:'icon-mini-refresh', 

			handler : function(){ 

			alert('refresh'); 

			} 

			}] 

			}); 
		
		}  
 // ===我的方式：改进V2：嵌套内容。
 function addTab_V2(){ 
		//$("#myTab").tabs('add',参数)===添加tabs
		
		$("#myTab").tabs('add',{ 

			title:'New Tab', 

// 			content:'<iframe src="www.baidu.com"></iframe>', //==404
// 			content:'<iframe src="http://www.baidu.com" style="height:100%,width:100%"></iframe>',//样式无效，样式属性分号隔开 
// 			content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%"></iframe>',//ok 
			content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%" scrolling="no"></iframe>',//去滚动条。ok 

			closable:true, 

			tools:[{ 

			iconCls:'icon-mini-refresh', 

			handler : function(){ 

			alert('refresh'); 

			} 

			}] 

			}); 
		
		}
 
 // ===我的方式：改进V3：判断选项卡是否存在。存在则选中，不存在则添加。
 //===待改进：不能根据传来的节点，灵活 创建对应的tab。
 //===使用EasyUI方式需要用到tree对象.（不熟）===参考day45_StudentInfoManage案例。
 //===这里用的是：JQuery的zTree组件。也是一个树形组件。
 //######【JQuery的zTree组件和 EasyUI组合使用】===因为：【EasyUI本就是封装Ajax(基于JQuery)+Json。】
 function addTab(){ 
		//$("#myTab").tabs('add',参数)===添加tabs
		//===API:  exists函数第二个参数是要判断的tab的索引或title.
		
		var exists=$("#myTab").tabs('exists','New Tab');
		if (exists) {
			$("#myTab").tabs('select','New Tab');//===API:存在则选中
		} else {//不存在则添加。==添加面板的代码复制到这里。
			
			$("#myTab").tabs('add',{ 
				title:'New Tab', 
//	 			content:'<iframe src="www.baidu.com"></iframe>', //==404
//	 			content:'<iframe src="http://www.baidu.com" style="height:100%,width:100%"></iframe>',//样式无效，样式属性分号隔开 
//	 			content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%"></iframe>',//ok 
				content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%" scrolling="no"></iframe>',//去滚动条。ok 

				closable:true, 

				tools:[{ 

				iconCls:'icon-mini-refresh', 

				handler : function(){ 

				//alert('refresh'); 

				} 

				}] 

				});
		}
		
		}
		/* ===老师方式：
		$(function(){
			
// 			 $("#addButton").click(){
				
// 			} 
			
			$("#addButton").click(function (){
// 				alert("1111");
				$("#myTab").tabs('add',{ 

					title:'New Tab', 

					content:'Tab Body', 

					closable:true, 

					tools:[{ 

					iconCls:'icon-mini-refresh', 

					handler : function(){ 

					alert('refresh'); 

					} 

					}] 

					}); 	
				
			});
		}) */

</script>
</head>
<!-- ===easyui-layout:布局  效果 -->
<body class="easyui-layout">
<!-- 	<div class="easyui-layout"> -->
		<div title="东"  data-options="region:'east'" style="width:200px;height:200px"></div>
		<div title="西"  data-options="region:'west'" style="width:200px;height:200px">
				<!-- fit="true":让easyui-accordion填满父容器div -->
				<!-- <div class="easyui-accordion" fit="true">==》改良：属性放在data-options里。
					===data-options作用：【把组件的属性统统放在这里，统一管理属性（任意组件）】
				 -->
			<div class="easyui-accordion" data-options="fit:true">
<!-- 				===easyui-accordion:手风琴 效果
				<div title="面板一" class="easyui-according"></div> -->
				<div title="面板一" style="height:150px">
 					<!--<a class="easyui-linkbutton" id="addButton">添加tab</a> -->
 					<!-- ===###### 【我的方式】 ok(事件绑定使用属性就行了：可读性也好。。。)-->
					<a class="easyui-linkbutton" οnclick="addTab()">添加tab</a>
				</div>
				<div title="面板二" style="height:150px">
					有内容伸缩效果才明显
					有内容伸缩效果才明显
					有内容伸缩效果才明显
					有内容伸缩效果才明显
				</div>
			</div>
		</div>
		<div title="南"  data-options="region:'south'" style="width:200px;height:50px"></div>
		<div title="北"  data-options="region:'north'" style="width:200px;height:100px"></div>
		<div title="中"  data-options="region:'center'" style="width:200px;height:200px">
			<!-- 复制easyui-accordion代码，改改。。。。 -->
			<div class="easyui-tabs" data-options="fit:true" id="myTab">
			
				<!-- iconCls：图片样式class；==【 data-options="closable:true;iconCls:icon-reload"效果显示不出来】 -->
 				<!-- ==静态reload图标：
 				<div title="面板一" iconCls="icon-reload" data-options="closable:true">  -->
 				<!-- ==动态reload图标：iconCls的值少了单引号，出不来
 				<div title="面板一"  data-options="closable:true,tools[{iconCls:icon-reload,handler:reload}]"> -->
 				
  				<!-- 错误：少个冒号	tools[{	iconCls:'icon-reload',handler:function(){ 
 						===================ok ===改动  -->
 				<div title="面板一"  
 					data-options="closable:true,
 					tools:[{ 
						iconCls:'icon-reload', 
						
						handler : reload
						
						}] 
 					
 					">
					tabs内容
					tabs内容
					tabs内容
					tabs内容
					tabs内容
				</div>
				<div title="面板二" >
					tabs内容
					tabs内容
					tabs内容
					tabs内容
					tabs内容
				</div>
			</div>
		</div>
</body>
</html>

5、加上：点击左侧不同的选项，动态添加不同的选项卡tab（需要传递节点对象到js里）

实现方式1：使用EasyUI的tree组件。===参考day45EasyUI的自己找的代码：day45_StudentInfoManage

实现方式2：使用JQuery的zTree组件。===据说比 EasyUI的tree组件更好用。反正项目用的就这个。

实现补全：

先学习一下zTree的使用：【下面两个例子和 前面EasyUI关系不大】

5.1  zTree标准json格式===不推荐--了解（认识）

ui05_zTree_standardJson.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- easyUI基本依赖 -->
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!-- 导入默认主题CSS文件 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css"/>
<!--  导入图标CSS文件 -->
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css"/>
<!--  导入国际化信息文件==可不要 -->
<script src="../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

<!-- zTree组件基本依赖：【API案例】可知。  JQuery已存在 -->
<!--  导入ztreeCSS文件 -->
<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css"/>
<!-- 导入zTree类库 -->
<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>

<script type="text/javascript">
	//===API 把tool 的handler函数放在页面。【习惯上还是 放在js脚本里】
	/* function reload(){  			
    alert('重新加载新数据')  		
   } */  
   
   function reload(){ 
		alert('reload'); 
	} 
   // ===我的方式：V1
 function addTab_V1(){ 
		
		$("#myTab").tabs('add',{ 

			title:'New Tab', 

			content:'Tab Body', 

			closable:true, 

			tools:[{ 

			iconCls:'icon-mini-refresh', 

			handler : function(){ 

			alert('refresh'); 

			} 

			}] 

			}); 
		
		}  
 // ===我的方式：改进V2：嵌套内容。
 function addTab_V2(){ 
		//$("#myTab").tabs('add',参数)===添加tabs
		
		$("#myTab").tabs('add',{ 

			title:'New Tab', 

// 			content:'<iframe src="www.baidu.com"></iframe>', //==404
// 			content:'<iframe src="http://www.baidu.com" style="height:100%,width:100%"></iframe>',//样式无效，样式属性分号隔开 
// 			content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%"></iframe>',//ok 
			content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%" scrolling="no"></iframe>',//去滚动条。ok 

			closable:true, 

			tools:[{ 

			iconCls:'icon-mini-refresh', 

			handler : function(){ 

			alert('refresh'); 

			} 

			}] 

			}); 
		
		}
 
 // ===我的方式：改进V3：判断选项卡是否存在。存在则选中，不存在则添加。
 //===待改进：不能根据传来的节点，灵活 创建对应的tab。
 //===使用EasyUI方式需要用到tree对象.（不熟）===参考day45_StudentInfoManage案例。
 //===这里用的是：JQuery的zTree组件。也是一个树形组件。
 //######【JQuery的zTree组件和 EasyUI组合使用】===因为：【EasyUI本就是封装Ajax(基于JQuery)+Json。】
 //===【标准json数据格式】
 var zTreeObj;
 var setting = {};
 var zTreeNodes = [
		{"name":"网站导航", open:true, children: [
			{ "name":"google", "url":"http://g.cn", "target":"_blank"},
			{ "name":"baidu", "url":"http://baidu.com", "target":"_blank"},
			{ "name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"}
			]
		},
		{"name":"网站导航2", open:true, children: [
		                          			{ "name":"google", "url":"http://g.cn", "target":"_blank"},
		                          			{ "name":"baidu", "url":"http://baidu.com", "target":"_blank"},
		                          			{ "name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"}
		                          			]
		                          		}
	];

	$(document).ready(function(){//===页面加载函数里 执行ztree init()
		zTreeObj = $.fn.zTree.init($("#myTree"), setting, zTreeNodes);

	});
 function addTab(){ 
		//$("#myTab").tabs('add',参数)===添加tabs
		//===API:  exists函数第二个参数是要判断的tab的索引或title.
		
		var exists=$("#myTab").tabs('exists','New Tab');
		if (exists) {
			$("#myTab").tabs('select','New Tab');//===API:存在则选中
		} else {//不存在则添加。==添加面板的代码复制到这里。
			
			$("#myTab").tabs('add',{ 
				title:'New Tab', 
//	 			content:'<iframe src="www.baidu.com"></iframe>', //==404
//	 			content:'<iframe src="http://www.baidu.com" style="height:100%,width:100%"></iframe>',//样式无效，样式属性分号隔开 
//	 			content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%"></iframe>',//ok 
				content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%" scrolling="no"></iframe>',//去滚动条。ok 

				closable:true, 

				tools:[{ 

				iconCls:'icon-mini-refresh', 

				handler : function(){ 

				//alert('refresh'); 

				} 

				}] 

				});
		}
		
		}
		/* ===老师方式：
		$(function(){
			
// 			 $("#addButton").click(){
				
// 			} 
			
			$("#addButton").click(function (){
// 				alert("1111");
				$("#myTab").tabs('add',{ 

					title:'New Tab', 

					content:'Tab Body', 

					closable:true, 

					tools:[{ 

					iconCls:'icon-mini-refresh', 

					handler : function(){ 

					alert('refresh'); 

					} 

					}] 

					}); 	
				
			});
		}) */

</script>
</head>
<!-- ===easyui-layout:布局  效果 -->
<body class="easyui-layout">
<!-- 	<div class="easyui-layout"> -->
		<div title="东"  data-options="region:'east'" style="width:200px;height:200px"></div>
		<div title="西"  data-options="region:'west'" style="width:200px;height:200px">
			<div class="easyui-accordion" data-options="fit:true">
				<div title="面板一" >
					<!-- <a class="easyui-linkbutton" οnclick="addTab()">添加tab</a> -->
					<ul id="myTree" class="ztree" ></ul>
				</div>
				<div title="面板二" >
					有内容伸缩效果才明显
					有内容伸缩效果才明显
					有内容伸缩效果才明显
					有内容伸缩效果才明显
				</div>
			</div>
			
		</div>
		<div title="南"  data-options="region:'south'" style="width:200px;height:50px"></div>
		<div title="北"  data-options="region:'north'" style="width:200px;height:100px"></div>
		<div title="中"  data-options="region:'center'" style="width:200px;height:200px">
			<!-- 复制easyui-accordion代码，改改。。。。 -->
			<div class="easyui-tabs" data-options="fit:true" id="myTab">
			
				<!-- iconCls：图片样式class；==【 data-options="closable:true;iconCls:icon-reload"效果显示不出来】 -->
 				<!-- ==静态reload图标：
 				<div title="面板一" iconCls="icon-reload" data-options="closable:true">  -->
 				<!-- ==动态reload图标：iconCls的值少了单引号，出不来
 				<div title="面板一"  data-options="closable:true,tools[{iconCls:icon-reload,handler:reload}]"> -->
 				
  				<!-- 错误：少个冒号	tools[{	iconCls:'icon-reload',handler:function(){ 
 						===================ok ===改动  -->
 				<div title="面板一"  
 					data-options="closable:true,
 					tools:[{ 
						iconCls:'icon-reload', 
						
						handler : reload
						
						}] 
 					
 					">
					tabs内容
					tabs内容
					tabs内容
					tabs内容
					tabs内容
				</div>
				<div title="面板二" >
					tabs内容
					tabs内容
					tabs内容
					tabs内容
					tabs内容
				</div>
			</div>
		</div>
</body>
</html>


5.2  zTree简单json格式===【推荐】（现在很多项目后台树形目录都是用JQuery zTree而不是EasyUI tree）

ui06_zTree_simpleJson.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- easyUI基本依赖 -->
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!-- 导入默认主题CSS文件 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css"/>
<!--  导入图标CSS文件 -->
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css"/>
<!--  导入国际化信息文件==可不要 -->
<script src="../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

<!-- zTree组件基本依赖：【API案例】可知。  JQuery已存在 -->
<!--  导入ztreeCSS文件 -->
<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css"/>
<!-- 导入zTree类库 -->
<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>

<script type="text/javascript">
	//===API 把tool 的handler函数放在页面。【习惯上还是 放在js脚本里】
	/* function reload(){  			
    alert('重新加载新数据')  		
   } */  
   
   function reload(){ 
		alert('reload'); 
	} 
   // ===我的方式：V1
 function addTab_V1(){ 
		
		$("#myTab").tabs('add',{ 

			title:'New Tab', 

			content:'Tab Body', 

			closable:true, 

			tools:[{ 

			iconCls:'icon-mini-refresh', 

			handler : function(){ 

			alert('refresh'); 

			} 

			}] 

			}); 
		
		}  
 // ===我的方式：改进V2：嵌套内容。
 function addTab_V2(){ 
		//$("#myTab").tabs('add',参数)===添加tabs
		
		$("#myTab").tabs('add',{ 

			title:'New Tab', 

// 			content:'<iframe src="www.baidu.com"></iframe>', //==404
// 			content:'<iframe src="http://www.baidu.com" style="height:100%,width:100%"></iframe>',//样式无效，样式属性分号隔开 
// 			content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%"></iframe>',//ok 
			content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%" scrolling="no"></iframe>',//去滚动条。ok 

			closable:true, 

			tools:[{ 

			iconCls:'icon-mini-refresh', 

			handler : function(){ 

			alert('refresh'); 

			} 

			}] 

			}); 
		
		}
 
 // ===我的方式：改进V3：判断选项卡是否存在。存在则选中，不存在则添加。
 //===待改进：不能根据传来的节点，灵活 创建对应的tab。
 //===使用EasyUI方式需要用到tree对象.（不熟）===参考day45_StudentInfoManage案例。
 //===这里用的是：JQuery的zTree组件。也是一个树形组件。
 //######【JQuery的zTree组件和 EasyUI组合使用】===因为：【EasyUI本就是封装Ajax(基于JQuery)+Json。】

 var zTreeObj;
 var setting = {
		 data:{
			 simpleData:{
				 enable:true
			 }
		 }
 };
 //===【标准json数据格式】 children
/*  var zTreeNodes = [
		{"name":"网站导航", open:true, children: [
			{ "name":"google", "url":"http://g.cn", "target":"_blank"},
			{ "name":"baidu", "url":"http://baidu.com", "target":"_blank"},
			{ "name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"}
			]
		},
		{"name":"网站导航2", open:true, children: [
		                          			{ "name":"google", "url":"http://g.cn", "target":"_blank"},
		                          			{ "name":"baidu", "url":"http://baidu.com", "target":"_blank"},
		                          			{ "name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"}
		                          			]
		                          		}
	]; */
	
	//===【简单json数据格式】 
  var zTreeNodes = [
			//===一个目录
			/*{"id":1, "name":"网站导航", open:true},
			// ====【pId写错大小写，父文件夹效果出不来】
			{ "id":11,"pid":1,"name":"google", "url":"http://g.cn", "target":"_blank"}, 
			{ "id":11,"pId":1,"name":"google", "url":"http://g.cn", "target":"_blank"}, 
			{ "id":12,"pId":1,"name":"baidu", "url":"http://baidu.com", "target":"_blank"}  */
			//===多个目录
		  	{"id":1, "name":"网站导航", open:true},
			{ "id":11,"pId":1,"name":"google", "url":"http://g.cn", "target":"_blank"},
			{ "id":12,"pId":1,"name":"baidu", "url":"http://baidu.com", "target":"_blank"},
			{ "id":13,"pId":1,"name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"},
		  	{"id":2, "name":"网站导航2", open:true},
			{ "id":21,"pId":2,"name":"google", "url":"http://g.cn", "target":"_blank"},
			{ "id":22,"pId":2,"name":"baidu", "url":"http://baidu.com", "target":"_blank"},
			{ "id":23,"pId":2,"name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"} 
		]; 

	$(document).ready(function(){//===页面加载函数里 执行ztree init()
		zTreeObj = $.fn.zTree.init($("#myTree"), setting, zTreeNodes);

	});
 function addTab(){ 
		//$("#myTab").tabs('add',参数)===添加tabs
		//===API:  exists函数第二个参数是要判断的tab的索引或title.
		
		var exists=$("#myTab").tabs('exists','New Tab');
		if (exists) {
			$("#myTab").tabs('select','New Tab');//===API:存在则选中
		} else {//不存在则添加。==添加面板的代码复制到这里。
			
			$("#myTab").tabs('add',{ 
				title:'New Tab', 
//	 			content:'<iframe src="www.baidu.com"></iframe>', //==404
//	 			content:'<iframe src="http://www.baidu.com" style="height:100%,width:100%"></iframe>',//样式无效，样式属性分号隔开 
//	 			content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%"></iframe>',//ok 
				content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%" scrolling="no"></iframe>',//去滚动条。ok 

				closable:true, 

				tools:[{ 

				iconCls:'icon-mini-refresh', 

				handler : function(){ 

				//alert('refresh'); 

				} 

				}] 

				});
		}
		
		}
		/* ===老师方式：
		$(function(){
			
// 			 $("#addButton").click(){
				
// 			} 
			
			$("#addButton").click(function (){
// 				alert("1111");
				$("#myTab").tabs('add',{ 

					title:'New Tab', 

					content:'Tab Body', 

					closable:true, 

					tools:[{ 

					iconCls:'icon-mini-refresh', 

					handler : function(){ 

					alert('refresh'); 

					} 

					}] 

					}); 	
				
			});
		}) */

</script>
</head>
<!-- ===easyui-layout:布局  效果 -->
<body class="easyui-layout">
<!-- 	<div class="easyui-layout"> -->
		<div title="东"  data-options="region:'east'" style="width:200px;height:200px"></div>
		<div title="西"  data-options="region:'west'" style="width:200px;height:200px">
			<div class="easyui-accordion" data-options="fit:true">
				<div title="面板一" >
					<!-- <a class="easyui-linkbutton" οnclick="addTab()">添加tab</a> -->
					<ul id="myTree" class="ztree" ></ul>
				</div>
				<div title="面板二" >
					有内容伸缩效果才明显
					有内容伸缩效果才明显
					有内容伸缩效果才明显
					有内容伸缩效果才明显
				</div>
			</div>
			
		</div>
		<div title="南"  data-options="region:'south'" style="width:200px;height:50px"></div>
		<div title="北"  data-options="region:'north'" style="width:200px;height:100px"></div>
		<div title="中"  data-options="region:'center'" style="width:200px;height:200px">
			<!-- 复制easyui-accordion代码，改改。。。。 -->
			<div class="easyui-tabs" data-options="fit:true" id="myTab">
			
				<!-- iconCls：图片样式class；==【 data-options="closable:true;iconCls:icon-reload"效果显示不出来】 -->
 				<!-- ==静态reload图标：
 				<div title="面板一" iconCls="icon-reload" data-options="closable:true">  -->
 				<!-- ==动态reload图标：iconCls的值少了单引号，出不来
 				<div title="面板一"  data-options="closable:true,tools[{iconCls:icon-reload,handler:reload}]"> -->
 				
  				<!-- 错误：少个冒号	tools[{	iconCls:'icon-reload',handler:function(){ 
 						===================ok ===改动  -->
 				<div title="面板一"  
 					data-options="closable:true,
 					tools:[{ 
						iconCls:'icon-reload', 
						
						handler : reload
						
						}] 
 					
 					">
					tabs内容
					tabs内容
					tabs内容
					tabs内容
					tabs内容
				</div>
				<div title="面板二" >
					tabs内容
					tabs内容
					tabs内容
					tabs内容
					tabs内容
				</div>
			</div>
		</div>
</body>
</html>

5.3  进入正题：【zTree动态创建tab】###

ui07_zTree_loadJsonDataFile.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- easyUI基本依赖 -->
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!-- 导入默认主题CSS文件 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css"/>
<!--  导入图标CSS文件 -->
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css"/>
<!--  导入国际化信息文件==可不要 -->
<script src="../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

<!-- ===zTree组件基本依赖：【API案例】可知。  JQuery已存在 -->
<!--  导入ztreeCSS文件 -->
<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css"/>
<!-- 导入zTree类库 -->
<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>

<script type="text/javascript">
	//===API 把tool 的handler函数放在页面。【习惯上还是 放在js脚本里】
	/* function reload(){  			
    alert('重新加载新数据')  		
   } */  
   
   function reload(){ 
		alert('reload'); 
	} 
   // ===我的方式：V1
 function addTab_V1(){ 
		
		$("#myTab").tabs('add',{ 

			title:'New Tab', 

			content:'Tab Body', 

			closable:true, 

			tools:[{ 

			iconCls:'icon-mini-refresh', 

			handler : function(){ 

			alert('refresh'); 

			} 

			}] 

			}); 
		
		}  
 // ===我的方式：改进V2：嵌套内容。
 function addTab_V2(){ 
		//$("#myTab").tabs('add',参数)===添加tabs
		
		$("#myTab").tabs('add',{ 

			title:'New Tab', 

// 			content:'<iframe src="www.baidu.com"></iframe>', //==404
// 			content:'<iframe src="http://www.baidu.com" style="height:100%,width:100%"></iframe>',//样式无效，样式属性分号隔开 
// 			content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%"></iframe>',//ok 
			content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%" scrolling="no"></iframe>',//去滚动条。ok 

			closable:true, 

			tools:[{ 

			iconCls:'icon-mini-refresh', 

			handler : function(){ 

			alert('refresh'); 

			} 

			}] 

			}); 
		
		}
 
 // ===我的方式：改进V3：判断选项卡是否存在。存在则选中，不存在则添加。
 //===待改进：不能根据传来的节点，灵活 创建对应的tab。
 //===使用EasyUI方式需要用到tree对象.（不熟）===参考day45_StudentInfoManage案例。
 //===这里用的是：JQuery的zTree组件。也是一个树形组件。
 //######【JQuery的zTree组件和 EasyUI组合使用】===因为：【EasyUI本就是封装Ajax(基于JQuery)+Json。】

 var zTreeObj;
 var setting = {
		 data:{
			 simpleData:{
				 enable:true
			 }
		 },
		 //====动态添加 tab
		 callback: {
				onClick: zTreeOnClick
		}
 };
 function zTreeOnClick(event, treeId, treeNode) {
	    //alert(treeNode.tId + ", " + treeNode.name);
	    
	    //====动态添加tab的具体实现：addTab()修改而来。
	    //addTab()：只能静态添加某一个tab。
	    /* var exists=$("#myTab").tabs('exists','New Tab');
		if (exists) {
			$("#myTab").tabs('select','New Tab');//===API:存在则选中
		} else {//不存在则添加。==添加面板的代码复制到这里。
			
			$("#myTab").tabs('add',{ 
				title:'New Tab', 
				content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%" scrolling="no"></iframe>',//去滚动条。ok 
				closable:true, 

				tools:[{ 

				iconCls:'icon-mini-refresh', 

				handler : function(){ 

				//alert('refresh'); 

				} 

				}] 

				});
		} */
		
		//===文件夹不可以点击
		//if (treeNode.page==null) {//===null不行
		if (treeNode.page==undefined) {//===放在后面创建tab不行。必放放前面
			return;
		} 
		
		//===改动:
	    //var exists=$("#myTab").tabs('exists','New Tab');
	    var exists=$("#myTab").tabs('exists',treeNode.name);
		if (exists) {
			//$("#myTab").tabs('select','New Tab');//===API:存在则选中
			$("#myTab").tabs('select',treeNode.name);//===API:存在则选中
		} else {//不存在则添加。==添加面板的代码复制到这里。
			
			$("#myTab").tabs('add',{ 
				//title:'New Tab', 
				title:treeNode.name, 
				//content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%" scrolling="no"></iframe>',//去滚动条。ok 
					//===src：添加../才能找到指定页面
				content:'<iframe src="../'+treeNode.page+'" style="height:100%;width:100%" scrolling="no"></iframe>',//去滚动条。ok 
				closable:true, 

				tools:[{ 

				iconCls:'icon-reload', 

				handler : function(){ 

				//alert('reload'); 

				} 

				}] 

				});
		}
		
		//===文件夹不可以点击
		//if (treeNode.page==null) {//===null不行
		/* if (treeNode.page==undefined) {//===放在后面创建tab不行。必放放前面
			return;
		} */
		
		
		
	};
 //===【标准json数据格式】 children
/*  var zTreeNodes = [
		{"name":"网站导航", open:true, children: [
			{ "name":"google", "url":"http://g.cn", "target":"_blank"},
			{ "name":"baidu", "url":"http://baidu.com", "target":"_blank"},
			{ "name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"}
			]
		},
		{"name":"网站导航2", open:true, children: [
		                          			{ "name":"google", "url":"http://g.cn", "target":"_blank"},
		                          			{ "name":"baidu", "url":"http://baidu.com", "target":"_blank"},
		                          			{ "name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"}
		                          			]
		                          		}
	]; */
	
	//===【简单json数据格式】 
  var zTreeNodes = [
			//===一个目录
			/*{"id":1, "name":"网站导航", open:true},
			// ====【pId写错大小写，父文件夹效果出不来】
			{ "id":11,"pid":1,"name":"google", "url":"http://g.cn", "target":"_blank"}, 
			{ "id":11,"pId":1,"name":"google", "url":"http://g.cn", "target":"_blank"}, 
			{ "id":12,"pId":1,"name":"baidu", "url":"http://baidu.com", "target":"_blank"}  */
			//===多个目录
		  	{"id":1, "name":"网站导航", open:true},
			{ "id":11,"pId":1,"name":"google", "url":"http://g.cn", "target":"_blank"},
			{ "id":12,"pId":1,"name":"baidu", "url":"http://baidu.com", "target":"_blank"},
			{ "id":13,"pId":1,"name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"},
		  	{"id":2, "name":"网站导航2", open:true},
			{ "id":21,"pId":2,"name":"google", "url":"http://g.cn", "target":"_blank"},
			{ "id":22,"pId":2,"name":"baidu", "url":"http://baidu.com", "target":"_blank"},
			{ "id":23,"pId":2,"name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"} 
		]; 

	/* $(document).ready(function(){//===页面加载函数里 执行ztree init()
		zTreeObj = $.fn.zTree.init($("#myTree"), setting, zTreeNodes);

	}); */
	$(function(){//===页面加载函数里 执行ztree init()
		//zTreeObj = $.fn.zTree.init($("#myTree"), setting, zTreeNodes);
		$.post(
				"../data/menu.json",
				function(data){//接收访问json文件返回的json数据==【和访问；浏览器response返回一样】
					zTreeObj = $.fn.zTree.init($("#myTree"), setting, data);
				},
				"json"//本就访问的json文件，可省略
		);
	}); 
	//====没用
 function addTab(){ 
		//$("#myTab").tabs('add',参数)===添加tabs
		//===API:  exists函数第二个参数是要判断的tab的索引或title.
		
		var exists=$("#myTab").tabs('exists','New Tab');
		if (exists) {
			$("#myTab").tabs('select','New Tab');//===API:存在则选中
		} else {//不存在则添加。==添加面板的代码复制到这里。
			
			$("#myTab").tabs('add',{ 
				title:'New Tab', 
				content:'<iframe src="http://www.baidu.com" style="height:100%;width:100%" scrolling="no"></iframe>',//去滚动条。ok 
				closable:true, 

				tools:[{ 

				iconCls:'icon-mini-refresh', 

				handler : function(){ 

				//alert('refresh'); 

				} 

				}] 

				});
		}
		
		}
		/* ===老师方式：
		$(function(){
			
// 			 $("#addButton").click(){
				
// 			} 
			
			$("#addButton").click(function (){
// 				alert("1111");
				$("#myTab").tabs('add',{ 

					title:'New Tab', 

					content:'Tab Body', 

					closable:true, 

					tools:[{ 

					iconCls:'icon-mini-refresh', 

					handler : function(){ 

					alert('refresh'); 

					} 

					}] 

					}); 	
				
			});
		}) */

</script>
</head>
<!-- ===easyui-layout:布局  效果 -->
<body class="easyui-layout">
<!-- 	<div class="easyui-layout"> -->
		<div title="东"  data-options="region:'east'" style="width:200px;height:200px"></div>
		<div title="西"  data-options="region:'west'" style="width:200px;height:200px">
			<div class="easyui-accordion" data-options="fit:true">
				<div title="面板一" >
					<!-- <a class="easyui-linkbutton" οnclick="addTab()">添加tab</a> -->
					<ul id="myTree" class="ztree" ></ul>
				</div>
				<div title="面板二" >
					有内容伸缩效果才明显
					有内容伸缩效果才明显
					有内容伸缩效果才明显
					有内容伸缩效果才明显
				</div>
			</div>
			
		</div>
		<div title="南"  data-options="region:'south'" style="width:200px;height:50px"></div>
		<div title="北"  data-options="region:'north'" style="width:200px;height:100px"></div>
		<div title="中"  data-options="region:'center'" style="width:200px;height:200px">
			<!-- 复制easyui-accordion代码，改改。。。。 -->
			<div class="easyui-tabs" data-options="fit:true" id="myTab">
			
				<!-- iconCls：图片样式class；==【 data-options="closable:true;iconCls:icon-reload"效果显示不出来】 -->
 				<!-- ==静态reload图标：
 				<div title="面板一" iconCls="icon-reload" data-options="closable:true">  -->
 				<!-- ==动态reload图标：iconCls的值少了单引号，出不来
 				<div title="面板一"  data-options="closable:true,tools[{iconCls:icon-reload,handler:reload}]"> -->
 				
  				<!-- 错误：少个冒号	tools[{	iconCls:'icon-reload',handler:function(){ 
 						===================ok ===改动  -->
 				<div title="面板一"  
 					data-options="closable:true,
 					tools:[{ 
						iconCls:'icon-reload', 
						
						handler : reload
						
						}] 
 					
 					">
					tabs内容
					tabs内容
					tabs内容
					tabs内容
					tabs内容
				</div>
				<div title="面板二" >
					tabs内容
					tabs内容
					tabs内容
					tabs内容
					tabs内容
				</div>
			</div>
		</div>
</body>
</html>

=====项目代码有，不必复制。maven管理的项目。其实东西很简单。目录看起来有点多。

http://pan.baidu.com/s/1eRSM7zs

=====【EasyUI后台系统还是很常用的，不熟悉很虚。基础学的越牢固越好吧。。。】

=====================

互联网cjfw
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值