最近的项目中用到了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. NPOI根据模板生成chart图表导出Excel

    导入NPOI的全部dll. 因为NPOI的API里面还没有对于Chart图表方面的操作,所以只能根据提示做好的图表作为模板,修改数据源的方法来改变图表. 注意:NPOI要用2003版以下的excel才 ...

  2. U3D自定义Inspector项未触发保存事件的解决方案

    1.问题描述与解决方案 1.1.说明 应该只有起步做U3D编辑器插件的部分同行需要了解本文. 该问题源于在做UI插件的时候,发现Inspector面板上手动修改值后,没有触发U3D编辑器本身的修改事件 ...

  3. 泛函编程（9）－异常处理－Option

    Option是一种新的数据类型.形象的来描述:Option就是一种特殊的List,都是把数据放在一个管子里:然后在管子内部对数据进行各种操作.所以Option的数据操作与List很相似.不同的是Opt ...

  4. Docker源码编译

    官方建议docker源码编译在docker容器内进行,因为官方提供的容器内已经继承了编译需要的环境,如果非要自己搭建编译环境也不是不可以,就是稍微有些繁琐.以下以1.8.2版本为例. 1.pull d ...

  5. java基础练习[一]

    moka同学java学习笔记 package moka.hello; public class HelloWorld {     public static void main(String[] ar ...

  6. Java中处理异常中return关键字

    Java中,执行try-catch-finally语句需要注意: 第一:return语句并不是函数的最终出口,如果有finally语句,这在return之后还会执行finally(return的值会暂 ...

  7. MAC下 JDK环境配置、版本切换以及ADB环境配置

    网上方法,自己总结:亲测可行! 一.JDK环境配置.版本切换: 通过命令’jdk6′, ‘jdk7′,’jdk8’轻松切换到对应的Java版本: 1.首先安装所有的JDk:* Mac自带了的JDK6, ...

  8. handler机制的原理（转）

      Handler概述   andriod提供了Handler 和 Looper 来满足线程间的通信.Handler先进先出原则.Looper类用来管理特定线程内对象之间的消息交换(MessageEx ...

  9. Java 进程占用 VIRT 虚拟内存超高的问题研究

    1. 现象 最近发现线上机器 java 8 进程的 VIRT 虚拟内存使用达到了 50G+,如下图所示: 2. 不管用的 -Xmx 首先第一想到的当然使用 java 的 -Xmx 去限制堆的使用.但是 ...

  10. 用js枚举实现简易菜单效果

    用js枚举实现简易菜单效果,左侧显示菜单,右侧显示用户选择的菜单,一图胜千言,还是直接来张效果图吧: 以下是代码: <DOCTYPE html> <html> <head ...