关于点击ztree的节点将页面生成到easyui的新增选项卡（easyui-tabs）时，总是在浏览器中生成一个新的页面的问题

　　最近的项目中用到了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='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="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效果图