最近的項目中用到了easyui，還有ztree菜單。在這里將我遇到的一些問題寫出來算是做個筆記吧。
這是我頭一次在博客園里分享代碼，我的處女作，寫的不好的地方還望各位見諒！
由於很久沒有寫過前台的東西手有點生，剛開始還以為很簡單（不過確實很簡單）然后咚咚咚的一頓狂敲，再然后一運行，。。。哎呀！ 點擊ztree的節點除了選項卡有頁面外，瀏覽器還給我生成了一個頁面。 仔細一想 ：也是，點擊節點時 ztree會根據treeNode的url屬性去訪問后台，然后肯定會生成一個新的jsp頁面，雖然你把url的給了easyui-tabs 但是然並卵，跟easyui-tabs又沒關系。於是我就想 如果點擊節點時不讓他去訪問后台不就完了嗎？然后百度了一下，結合ztree的API 發現 
；
廢話不多說，上代碼。。。
1 <script type="text/javascript" charset="utf-8"> 2 3 $(function(){ 4 5 /* 用於展現 zTree 的 DOM 容器 */ 6 var obj = $("#ztree"); 7 8 /*配置節點信息 */ 9 var zSetting = { 10 data:{ 11 simpleData:{ 12 enable:true, 13 idKey:"id", 14 pIdKey:"pId" 15 }, 16 key:{ 17 url:'_url' 18 } 19 }, 20 /* 點擊節點事件 */ 21 callback: { 22 onClick: zTreeOnClick 23 } 24 }; 25 26 /*獲取節點數據 */ 27 var uid = "${user.uid}"; 28 $.ajax({ 29 type:"post", 30 url:"<%=path%>/main/getPowerList.action", 31 async:false, 32 data:{uid:uid}, 33 dataType:"json", 34 success:function(mes){ 35 zNodes = mes; 36 } 37 }); 38 39 /* zTree 初始化方法 */ 40 $.fn.zTree.init(obj, zSetting, zNodes); 41 42 43 /* 展開全部節點 */ 44 var treeObj = $.fn.zTree.getZTreeObj("ztree"); 45 treeObj.expandAll(true); 46 47 }); 48 49 /* 點擊節點時觸發的函數 */ 50 function zTreeOnClick(event, treeId, treeNode) { 51 //如果點擊的是父節點 則折疊該節點 52 var zTree = $.fn.zTree.getZTreeObj("ztree"); 53 if (treeNode.isParent) { 54 zTree.expandNode(treeNode); 55 return false; 56 } else { 57 var url = "<%=path%>/"+treeNode.url; 58 var name = treeNode.name; 59 easyui_tab(name,url); 60 return true; 61 } 62 }; 63 64 //生成新的選項卡 65 function easyui_tab(text,url) { 66 67 //若選項卡已存在，選擇該選項卡 68 if ($("#tabs").tabs('exists', text)) { 69 $("#tabs").tabs('select', text); 70 } else { 71 var content = "<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src=" 72 + url + "></iframe>"; 73 74 //生成新的選項卡， 75 $("#tabs").tabs('add', { 76 title : text, 77 closable : true, 78 content : content, 79 }); 80 } 81 } 82 83 </script>
1 <body class="easyui-layout"> 2 3 <div data-options="region:'north',split:false,collapsible:false" style="height:100px;"></div> 4 5 <div data-options="region:'south',split:false" style="height:100px;"></div> 6 <!-- ztree盒子 --> 7 <div data-options="region:'west',title:'操作',collapsible:false,split:false" style="width:180px;"> 8 <div id="ztree" class="zTree" > 9 10 </div> 11 </div> 12 <div data-options="region:'center'" style="padding:0px;background:#eee;"> 13 <!-- 選型卡 --> 14 <div id="tabs" class="easyui-tabs" data-options="border:false" style="height:410px;"> 15 <div title="首頁" style="padding:20px;display:none;"> 16 <center> 17 <h1>歡迎使用</h1> 18 </center> 19 </div> 20 </div> 21 </div> 22 </body>
最后上一張簡單的Demo效果圖
