最近的项目中用到了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. LRU Cache

    LRU Cache 题目链接:https://oj.leetcode.com/problems/lru-cache/ Design and implement a data structure for ...

  2. error LNK1281: 无法生成 SAFESEH 映像 LNK2026 模块对于 SAFESEH 映像是不安全的 VS2015 /win10

    平台 VS2015 /win10 错误 LNK1281 无法生成 SAFESEH 映像. 错误 LNK2026 模块对于 SAFESEH 映像是不安全的. 将 release 改成 debug

  3. Winform开发框架之统计图表的实现

    在前面的一些随笔中,介绍了不少我的Winform框架的特性,上篇随笔<Winform开发框架之通用高级查询模块>对其中的通用高级模块进了一个整理说明,本篇继续介绍Winform开发框架重要 ...

  4. gene框架文档 - 路由类 gene_router

    路由类 Gene\Router 介绍 Gene\Router 是gene框架的核心类之一,本框架区别于其他常见框架的最大地方就是独特.强大.简单的路由定义等.路由强大灵活,支持回调.类方法:支持res ...

  5. C语言范例学习02

    第二章 指针 算是重点吧,这也是C语言的特色啊,直接访问物理存储. 重点: 指针就是一个存放它指向变量地址的变量,好绕口.   区分*在定义是与引用是的作用.   区分*.&的不同.   指针 ...

  6. Hibernate中的脏检查和缓存清理机制

    脏检查 Session到底是如何进行脏检查的呢?当一个Customer对象被加入到Session缓存中时,Session会为Customer对象的值类型的属性复制一份快照.当Session清理缓存时, ...

  7. 转载 教你使用PS来制作unity3D随机地形

  8. NullPointerException at android.widget.AbsListView.obtainView at android.widget.ListView.makeAndAddView

    使用ExpandableListView的时候,报如下错.网上搜索发现原来是在CommonNumberQueryAdapter的getGroupView()方法里返回的是null,注意细节哦!!! 1 ...

  9. C# Winform打包部署时添加注册表信息实现开机启动

    使用VS自带的打包模块可以很方便的对项目进行打包部署,同时我们也可以在安装部署时操作注册表实现开机启动软件.具体实现如下: 1.添加安装部署项目后,鼠标右键安装项目->视图->注册表,HK ...

  10. gulp入坑系列(4)——gulp的代码转换

    当然,gulp不仅仅能转换Sass,这里会提到如下转换: jsx转换成常规的JavaScript(说到jsx,玩过react的同学应该是知道的) es6转换为es5 Less,Sass转换为CSS 首 ...