======后台界面搭建过程从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后台系统还是很常用的,不熟悉很虚。基础学的越牢固越好吧。。。】
=====================