1.jquery easyUI动态添加选项卡(查看jquery easyUI手册)
1.1 用于动态添加一个选项卡
1.1.1 选中指定的选项卡和判断某个选项卡是否存在
测试代码：
<a id="but1" class="easyui-linkbutton">添加一个选项卡</a>
<script type="text/javascript">
$(function(){
//页面加载完成后，为上面按钮绑定事件
$("#but1").click(function(){
//判断选项卡是否存在
var e = $("#mytabs").tabs("exists","系统管理");//返回boolean类型
if(e){
//已经存在，选中就可以
$("#mytabs").tabs("select","系统管理");
}else{
//调用tabs对象的add方法动态添加一个选项卡
$("#mytabs").tabs("add",{
title:'系统管理',
iconCls:'icon-edit',
closable:true,
content:'<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>'
});
} })
})
</script>
<!-- tab面板 -->
<div id="mytabs" class="easyui-tabs" data-options="fit:true">
<!-- 使用子div表示每个面板
fit:true----自适应(填充父容器)
-->
<div data-options="iconCls:'icon-save'" title="面板一">111</div>
<div data-options="closable:true" title="面板二">222</div>
<div title="面板三">333</div>
</div>
2.jquert ztree插件使用
2.1在页面引入ztree相关文件
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
2.2 使用标准json数据构造ztree(了解)
<div title="面板二">
<!-- 展示ztree：使用标准json数据构造ztree -->
<ul id="ztree1" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//页面加载完成后，执行这段代码-----动态创建ztree
var setting = {};
//构造节点数据
var zNodes= [
{"name":"节点一","children":[
{"name":"节点一_1"},
{"name":"节点一_2"},
]},//每个json对象表示一个节点数据
{"name":"节点二"},//每个json对象表示一个节点数据
{"name":"节点三"},//每个json对象表示一个节点数据
];
//调用API初始化ztree
$.fn.zTree.init($("#ztree1"),setting,zNodes);
})
</script>
</div>
效果：
2.3 使用简单json数据构造ztree(重点)
其中id表示，这个节点的id；pId表示这个节点的父id
<div title="面板三">
<ul id="ztree2" class="ztree"></ul>
<script type="text/javascript">
$(function(){
var setting= {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
}
};
//构造节点数据
var zNodes= [
{"id":"1","pId":"0","name":"节点一"},//每个json对象表示一个节点数据
{"id":"2","pId":"1","name":"节点二"},//每个json对象表示一个节点数据
{"id":"3","pId":"2","name":"节点三"},//每个json对象表示一个节点数据
];
//调用API初始化ztree
$.fn.zTree.init($("#ztree2"),setting,zNodes);
})
</script>
</div>
效果：
2.4 使用ajax动态获取json数据构造ztree(重点)
<div title="面板四">
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
$(function(){
var setting3= {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
}
}; //发送ajax请求，获取json数据
//jQuery提供的ajax方法：ajax，post，get，load，getJson，getScript
var url="${pageContext.request.contextPath}/json/menu.json";
$.post(url,{},function(data){
//调用API初始化ztree
$.fn.zTree.init($("#ztree3"),setting3,data);
},'json'); })
</script>
</div>
json数据：
[
{ "id":"11", "pId":"0", "name":"基础数据"},
{ "id":"112", "pId":"11", "name":"取派员设置", "page":"page_base_staff.action"},
{ "id":"113", "pId":"11", "name":"区域设置","page":"page_base_region.action"},
{ "id":"114", "pId":"11", "name":"管理分区", "page":"page_base_subarea.action"},
{ "id":"115", "pId":"11", "name":"管理定区/调度排班","page":"page_base_decidedzone.action"},
{ "id":"12", "pId":"0", "name":"受理"},
{ "id":"121", "pId":"12", "name":"业务受理" ,"page":"page_qupai_noticebill_add.action"},
{ "id":"122", "pId":"12", "name":"工作单快速录入" ,"page":"page_qupai_quickworkorder.action"},
{ "id":"124", "pId":"12", "name":"工作单导入" ,"page":"page_qupai_workorderimport.action"},
{ "id":"13", "pId":"0", "name":"调度"},
{ "id":"131", "pId":"13", "name":"查台转单","page":""},
{ "id":"132", "pId":"13", "name":"人工调度","page":"page_qupai_diaodu.action"}
]
效果：
2.5 使用ajax动态获取json数据构造ztree，使用ztree提供的API为节点绑定事件(重点)
使用setting中的callback属性来使得每个节点有点击功能，
<div title="面板四">
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
$(function(){
var setting3= {
data: {
simpleData: {
enable: true//使用简单json数据构造ztree节点
}
},
callback: {
//动态添加选项卡
onClick:function(event,treeId,treeNode){
//判断该节点是否是根节点
if(treeNode.page != undefined) {
//判断选项卡是否存在
var e=$("#mytabs").tabs("exists",treeNode.name);
if(e){
//已经存在，选中
$("#mytabs").tabs("select",treeNode.name);
}else{
$("#mytabs").tabs("add",{
title:treeNode.name,
iconCls:'icon-edit',
closable:true,
content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.page+'"></iframe>'
});
}
} } }
}; //发送ajax请求，获取json数据
//jQuery提供的ajax方法：ajax，post，get，load，getJson，getScript
var url="${pageContext.request.contextPath}/json/menu.json";
$.post(url,{},function(data){
//调用API初始化ztree
$.fn.zTree.init($("#ztree3"),setting3,data);
},'json'); })
</script>
</div>
效果：