最近的项目中用到了easyui，还有ztree菜单。在这里将我遇到的一些问题写出来算是做个笔记吧。

　　

　　这是我头一次在博客园里分享代码，我的处女作，写的不好的地方还望各位见谅！

　　

　　由于很久没有写过前台的东西手有点生，刚开始还以为很简单（不过确实很简单）然后咚咚咚的一顿狂敲，再然后一运行，。。。哎呀！ 点击ztree的节点除了选项卡有页面外，浏览器还给我生成了一个页面。 仔细一想 ：也是，点击节点时 ztree会根据treeNode的url属性去访问后台，然后肯定会生成一个新的jsp页面，虽然你把url的给了easyui-tabs 但是然并卵，跟easyui-tabs又没关系。于是我就想   如果点击节点时不让他去访问后台不就完了吗？然后百度了一下，结合ztree的API 发现 ；

废话不多说，上代码。。。

 <script type="text/javascript" charset="utf-8">

       $(function(){

            /* 用于展现 zTree 的 DOM 容器 */

               var obj = $("#ztree");

            /*配置节点信息 */

              var zSetting = {

                   data:{

                       simpleData:{

                           enable:true,

                           idKey:"id",

                           pIdKey:"pId"

                       },

                       key:{

                          url:'_url'

                      }

                   },

                   /* 点击节点事件 */

                   callback: {

                     onClick: zTreeOnClick

                 }

               };

              /*获取节点数据 */

              var uid = "${user.uid}";

              $.ajax({

                  type:"post",

                  url:"<%=path%>/main/getPowerList.action",

                  async:false,

                  data:{uid:uid},

                  dataType:"json",

                  success:function(mes){

                      zNodes = mes;

                  }

              });

             /* zTree 初始化方法 */

             $.fn.zTree.init(obj, zSetting, zNodes);

           /* 展开全部节点 */

           var treeObj = $.fn.zTree.getZTreeObj("ztree");

         treeObj.expandAll(true);

         });

         /* 点击节点时触发的函数 */

         function zTreeOnClick(event, treeId, treeNode) {

             //如果点击的是父节点  则折叠该节点

             var zTree = $.fn.zTree.getZTreeObj("ztree");

           if (treeNode.isParent) {

                  zTree.expandNode(treeNode);

                  return false;

              } else {

                   var url = "<%=path%>/"+treeNode.url;

                    var name = treeNode.name;

                    easyui_tab(name,url);

                   return true;

                }

       };

       //生成新的选项卡

       function easyui_tab(text,url) {

           //若选项卡已存在，选择该选项卡

           if ($("#tabs").tabs('exists', text)) {

                   $("#tabs").tabs('select', text);

           } else {

                 var content = "<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="

                 + url + "></iframe>";   

               //生成新的选项卡，

                 $("#tabs").tabs('add', {

                    title : text,

                    closable : true,

                    content : content,

                 });

         }

     }      

     </script>
 <body class="easyui-layout">   

     <div data-options="region:'north',split:false,collapsible:false" style="height:100px;"></div>   

     <div data-options="region:'south',split:false" style="height:100px;"></div>

     <!-- ztree盒子 -->

     <div data-options="region:'west',title:'操作',collapsible:false,split:false" style="width:180px;">

         <div id="ztree" class="zTree" >

          </div>

     </div>

     <div data-options="region:'center'" style="padding:0px;background:#eee;">

         <!-- 选型卡 -->

         <div id="tabs" class="easyui-tabs" data-options="border:false" style="height:410px;">

             <div title="首页" style="padding:20px;display:none;">

                <center>

                     <h1>欢迎使用</h1>

                </center>

             </div>

         </div>

     </div>

  </body>

最后上一张简单的Demo效果图

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

  1. 在Discuz X 中增加一个单独的页面

    如果在DZ中增加一个新的页面,并且取得DZ中相关的用户等乱七八糟的属性,在旧的版本中只要引用一个 -. comm.php 文件就可以,但是在 X 版本以后好像就没.还好,X版本中还是有办法解决的,使用 ...

  2. iOS中的项目新特性页面的处理

    一般项目中都会出现新特性页面,比如第一次使用应用的时候,或者在应用设置里查看新特性的时候会出现. 这里,选择新建一个专门处理项目新特性的控制器,来完成功能. 首先是 NewFeaturesViewCo ...

  3. Layui-admin-iframe通过页面链接直接在iframe内打开一个新的页面，实现单页面的效果

    前言: 使用Layui-admin做后台管理框架有很长的一段时间了,但是一直没有对框架内iframe菜单栏切换跳转做深入的了解.今天有一个这样的需求就是通过获取超链接中传递过来的跳转地址和对应的tab ...

  4. 浏览器中输入URL到返回页面的全过程

    第一步,解析域名,找到主机IP (1)浏览器会缓存DNS一段时间,一般2-30分钟不等.如果有缓存,直接返回IP,否则下一步. (2)缓存中无法找到IP,浏览器会进行一个系统调用,查询hosts文件. ...

  5. 网易笔试题：浏览器中输入一个url后回车到返回页面信息的过程

    You enter a URL into the browser输入一个url地址 The browser looks up the IP address for the domain name浏览器 ...

  6. Intent启动一个新的页面

    一,Intent(目的) 的分类 显式 Intent 构造函数重载之一: Intent intent = new Intent(FirstActivity.this,SecondActivity.cl ...

  7. 使用JavaScript根据从后台获取来的数据打开一个新的页面

    HTML代码是: 入库类型是: <select id="selectIn" onchange="goUrl(this.options[this.selectedIn ...

  8. jsp重新打开一个新的页面

    有以下一种实现方式: 1.target="_blank” <a href="document.html" target="_blank"> ...

  9. 在 IE 浏览器中，使用 bootstrap 使得页面滚动条浮动显示，自动隐藏，自动消失

    貌似是从 IE10 开始?为了触屏操作优化浏览器的内容显示,IE 浏览器提供了一种可以浮动显示,自动隐藏的滚动条样式,但是这个样式会在某些情况下造成一些困扰,比如下图... 其实默认情况下,桌面版的 ...

随机推荐

  1. 【.NET框架】Dapper ORM 用法—Net下无敌的ORM

    假如你喜欢原生的Sql语句,又喜欢ORM的简单,那你一定会喜欢上Dapper这款ROM.点击下载 Dapper的优势: 1,Dapper是一个轻型的ORM类.代码就一个SqlMapper.cs文件,编 ...

  2. 【循序渐进学Python】6.Python中的函数

    1. 创建函数 一个函数代表一个行为并且返回一个结果(包括None),在Python中使用def关键字来定义一个函数,如下: def hello(name): print 'hello,' + nam ...

  3. WPF,给颜色SolidColorBrush添加动画

    /// <summary> /// 设置颜色动画 /// </summary> /// <returns></returns> private Soli ...

  4. C#更改win7系统时间的代码，以及为什么更改不成功

    我在用C#更改win7系统的时间时(必须用管理员的权限,点击要运行程序,鼠标右键“以管理员权限运行”),下面列出了3张图片,使用第一张的代码执行不成功,使用第二张图片可以执行成功,第三张图片是说明原因 ...

  5. A -- HDU 4585 Shaolin

    Shaolin Time Limit: 1000 MS Memory Limit: 32768 KB 64-bit integer IO format: %I64d , %I64u Java clas ...

  6. gcd和拓展gcd算法

    gcd算法是用来求两个数最大公约数的算法,他是依靠辗转相除(中国好像叫辗转相减)法来求两个数的最大公约数,别的地方也有很多介绍不做过多赘述,主要提供代码供自己参考. gcd(int a,int b) ...

  7. Python for循环内部实现的一个sample

    #!/usr/bin/env python # -*- coding: utf-8 -*- it = iter([1,2,3,4,5]) while True: try: x = next(it) p ...

  8. Failed to install on device ‘emulator-5554′: timeout

    启动android模拟器时候如果提示:Failed to install on device ‘emulator-5554′: timeout 这是可能因为卡的原因导致启动超时,解决办法:eclips ...

  9. .net aes加密视频等文件

    公司学习平台在app端下载下来的视频需要加密 随查找资料参考一些写法 写了aes的加密方法 记录防止忘记 using System; using System.Collections.Generic; ...

  10. JavaScript基础10——node对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...