最近的项目中用到了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. html5 canvas雨点打到窗玻璃动画

    html5 canvas雨点打到窗玻璃动画 HTML5下雨效果 效果预览:http://hovertree.com/texiao/html5/4.htm 以下是代码: <!doctype htm ...

  2. .NET转JAVA之拼音组件

    PS:做了4年,自我感觉.NET到瓶颈了,而且公司并没有深入运用.NET技术的项目,自我学习感觉也没太大动力(请骂我懒T_T).再加上技术年限越往上走,了解到的.NET职业提升环境就越来越艰难(个人理 ...

  3. csharp:百度语音识别

    public string API_id = "8888"; //你的ID public string API_record = null; public string API_r ...

  4. jquery 全选 全不选 反选

    1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-for ...

  5. 在博客中使用MathJax写数学公式

    前言 总结一些在博客园使用MathJax写数学公式的经验. 博客园 设置使用数学公式 进入你的博客:管理 > 选项 里面有个启用数学公式支持,选上后保存. 这时,你就可以在你的博客里写数学公式了 ...

  6. Laravel 5如何在中间件中获取路由参数？

    以官方文档中间件篇的年龄为例子进行了修改 路由部分 Route::get('test/age/{age}',[ 'middleware' => 'old', 'uses'=>'Test@t ...

  7. python 任意新闻正文提取

    在github上搜到一个正文提取程序,测试了一下基本可以对现在大多数大型新闻网站进行提取 后续我会分析一下这个程序的源码 使用非常简单 如下 # -*- coding: utf-8 -*- impor ...

  8. UML类图相关实践

    最近看了下设计模式,其中无可避免会设计很多类图,UML类图对于学习设计模式很重要,关于设计模式,我也会在这里写上一写,这一篇关于UML类图的就先当个铺垫. 1.先上一个简单的类图来简单说明下: 1). ...

  9. jQuery owlcarousel 旋转木马

    owlcarousel是一款猫头鹰旋转木马插件.OwlCarousel优势兼容所有浏览器支持响应式支持 CSS3 过度支持触摸事件支持 JSON 及自定义 JSON 格式支持进度条支持自定义事件支持延 ...

  10. Java集合 Json集合之间的转换

    1. Java集合转换成Json集合 关键类:JSONArray jsonArray = JSONArray.fromObject(Object obj); 使用说明:将Java集合对象直接传进JSO ...