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>
效果：
