===项目一day01:EasyUI【静态页面创建】手写基础小结【后台界面搭建过程从0到有的过程】（已补全）
2017-10-25 09:06
465 查看
======后台界面搭建过程从0到有的过程。
===博客目的：
====素材提供。不必自己找====这里主要复习 思想 和EasyUI 基础语法
1、布局
ui01_layout.html
2、加上：左侧目录栏：手风琴效果（伸缩）
ui02_accordion.html
ui03_tabs.html
4、加上：点击左侧目录选项，右侧添加选项卡。但是tab已存在就选中，不存在才添加。
ui04_tabs_add.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：
5.2 zTree简单json格式===【推荐】（现在很多项目后台树形目录都是用JQuery zTree而不是EasyUI tree）
ui06_zTree_simpleJson.html：
5.3 进入正题：【zTree动态创建tab】###
ui07_zTree_loadJsonDataFile.html：
=====项目代码有，不必复制。maven管理的项目。其实东西很简单。目录看起来有点多。
http://pan.baidu.com/s/1eRSM7zs
=====【EasyUI后台系统还是很常用的，不熟悉很虚。基础学的越牢固越好吧。。。】
=====================
===博客目的：
====素材提供。不必自己找====这里主要复习 思想 和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" onclick="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" onclick="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" onclick="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" onclick="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后台系统还是很常用的，不熟悉很虚。基础学的越牢固越好吧。。。】
=====================
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【SSH网上商城项目实战03】使用EasyUI搭建后台页面框架
- SSH框架网上商城项目第3战之使用EasyUI搭建后台页面框架
- 【SSH网上商城项目实战03】使用EasyUI搭建后台页面框架
- 【SSH网上商城项目实战03】使用EasyUI搭建后台页面框架
- 【SSH网上商城项目实战03】使用EasyUI搭建后台页面框架
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建
- Android基础之用Eclipse搭建Android开发环境和创建第一个Android项目（Windows平台）
- Android基础之用Eclipse搭建Android开发环境和创建第一个Android项目（Windows平台）
- python基础学习总结——Eclipse for python环境搭建及创建python项目
- Android基础之用Eclipse搭建Android开发环境和创建第一个Android项目（Windows平台）
- 【开源】OSharp框架解说系列（2.1）：EasyUI的后台界面搭建及极致重构
- Android基础之用Eclipse搭建Android开发环境和创建第一个Android项目（Windows平台）
- Android基础之用Eclipse搭建Android开发环境和创建第一个Android项目（Windows平台）
- Android基础之用Eclipse搭建Android开发环境和创建第一个Android项目（Windows平台）
- Android基础之用Eclipse搭建Android开发环境和创建第一个Android项目（Windows平台）
- Maven多模块，Dubbo分布式服务框架，SpringMVC，前后端分离项目，基础搭建，搭建过程出
- Android基础用Eclipse搭建Android开发环境和创建第一个Android项目
- Maven多模块，Dubbo分布式服务框架，SpringMVC，前后端分离项目，基础搭建，搭建过程出现的问题
- Android基础之用Eclipse搭建Android开发环境和创建第一个Android项目（Windows平台）
- Android基础之 用Eclipse搭建Android开发环境和创建第一个Android项目