<%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <%@ include file="/common/page.jsp" %>  // 这里是引用的公共代码 ，主要是css和js jstl 的引用  easyui核心js都在里面

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <link rel="stylesheet" href="${pageContext.request.contextPath }/ztree/css/demo.css" type="text/css">

     <link rel="stylesheet" href="${pageContext.request.contextPath }/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">

 <script type="text/javascript" src="${pageContext.request.contextPath }/ztree/js/jquery.ztree.core.js"></script>

     <style type="text/css">

         *{

          margin: 0 0 ;

         }

     </style>

 <title>Insert title here</title>

 </head>

 <body  class="easyui-layout">

             <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">

                 <h3>xxx 系统</h3>

             </div>

             <!-- collapsible 是否显示 可折叠按钮  -->

             <div id="west" data-options="region:'west',split:false,title:'West',collapsible:true" style="width:150px;padding:10px;">

                         <div id="treeDemo" class="ztree"></div>

             </div>

             <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>

             <div data-options="region:'center',title:'Center'" id="center" >
　　　　　　　　　　　　//这里是使用easyui 的tabs标签， 每次点击树形菜单（ztree），使用tabs创建一个标签

                 <div id="tt" class="easyui-tabs" style="width: 100%;height: 100%;">

                 </div>

 </body>

 <script type="text/javascript">

     /* $('#tt').tabs({

         border:false,

         onSelect:function(title){

             alert(title+' is selected');

         }

     });

     function addNode() {

         $("#tt").append("<div title='Tab4' data-options='closable:true'style='overflow:auto;padding: 20px;'>这里有个添加问题啊啊啊 </div>");

     }

   */

   　　　　

   function addTab(title, url){

         if ($('#tt').tabs('exists',title)){

             $('#tt').tabs('select',title);

         } else {

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

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

                 title:title,

                 content:content,

                 closable:true,

                 tools:[{

                 }]

             });

         }

     }
　　　　//ztree的callback 调用的方法

   function openTab(event, treeId, treeNode){

           if(treeNode.isParent){

               return;

           }
　　　　　　　　//调用easyui方法 ，判断是否创建标签

         if(!$("#tt").tabs('exists',treeNode.mname)){ // 如果不存在此tab则创建

             if(treeNode.url!="")

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

                     title:treeNode.mname,

                     href:treeNode.url,

                     closable:true,

                 });

         }else{                                       // 如果已经打开则选中

             $("#content_tabs").tabs('select',treeNode.mname);

         }

     }

 </script>

 <SCRIPT type="text/javascript">

         //ztree 树的创建方法

         var setting = {

             data: {

                 key:{

                     name: "mname",

                      url:'_url'

                  },

                 simpleData: {

                     enable: true,

                     idKey: "mid",

                     pIdKey: "pmid"

                 }

             },

             callback:{

                   onClick:openTab  // 单击ztree的响应函数

             }

         };

          $(document).ready(function(){

              $.post('loadMenus.action',function(zNodes){

                  $.fn.zTree.init($("#treeDemo"), setting, zNodes);

              })

         });

     </SCRIPT>

 </html>

easyUi 学习笔记 （一） 使用easyui 和ztree 创建前端框架的更多相关文章

  1. .NET CORE学习笔记系列(2)——依赖注入[4]: 创建一个简易版的DI框架[上篇]

    原文https://www.cnblogs.com/artech/p/net-core-di-04.html 本系列文章旨在剖析.NET Core的依赖注入框架的实现原理,到目前为止我们通过三篇文章从 ...

  2. Spring MVC 学习笔记2 - 利用Spring Tool Suite创建一个web 项目

    Spring MVC 学习笔记2 - 利用Spring Tool Suite创建一个web 项目 Spring Tool Suite 是一个带有全套的Spring相关支持功能的Eclipse插件包. ...

  3. JUC源码学习笔记5——线程池，FutureTask，Executor框架源码解析

    JUC源码学习笔记5--线程池,FutureTask,Executor框架源码解析 源码基于JDK8 参考了美团技术博客 https://tech.meituan.com/2020/04/02/jav ...

  4. easyUi 学习笔记 （二 ） 使用tabs 里datagridview 发送ajax请求 不访问后台的问题

    这个BUG 我花了一个半小时, 还是看不出哪里的问题,  于是就百度到这么一段话,我需要记住 <================================================= ...

  5. easyUI学习笔记二

    1．  拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...

  6. easyUI学习笔记一

    1.引用js文件 <script type="text/javascript" src = jquery-easyui/jquery.min.js> </scri ...

  7. easyui学习笔记3—在展开行内的增删改操作

    这一篇介绍在一个展开行内进行的增删操作,如果一行很长有很多的数据,在一个展开行内进行编辑将更加方便. 1.先看引用的资源 <link rel="stylesheet" hre ...

  8. EasyUI学习笔记（二）—— Layout

    一.layout页面布局 EasyUI布局容器包括东.西.南.北.中五个区域,其中中心面板是必须的,而东.西.南.北这四个面板是可选的,如果布局里面不需要东.西.南.北这四个面板,那么可以把相应的di ...

  9. EasyUI学习笔记（一）EasyUI入门

    一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jquery-easyui-1.7.2 解压后得到 ...

随机推荐

  1. 学习笔记 第八章 使用CSS美化列表

    第8章  使用CSS美化列表 8.1 列表的基本结构 在HTML中,列表结构可以分为两种基本类型:有序列表和无序列表.使用标签如下: <ul>...</ul>:标识无序列表: ...

  2. Android开源项目：GifView——Android显示GIF动画

    下载:http://code.google.com/p/gifview/downloads/list 简介:android中现在没有直接显示gif的view,只能通过mediaplay来显示,且还常常 ...

  3. 用pycharm+django开发web项目

    pycharm是python的一个商业的集成开发工具,本人感觉做python开发还是很好用的,django是一个很流行的python web开源框架,本文就是使用pycharm+django来开发py ...

  4. webgl 的空间变换（下）：空间变换

    在网上看了很多关于在三维世界中怎么把一个顶点经过一步步变化,最终呈现在我们的屏幕上的. 其实很多博客或者书籍已经讲的很清楚了,那为什么我还要特别再写一次博客来阐述自己观点呢?(这里只针对那些学习web ...

  5. xxtea 文件加密与解密

    加密 cocos luacompile -s src -d dst_dir -e -b xxxxx -k xxxxx --disable-compile 解密 cocos luacompile -s ...

  6. js 判断访问终端类型

    // 判断访问终端类型 var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appV ...

  7. 【转】c++数组初始化

    数组初始化列表中的元素个数小于指定的数组长度时,不足的元素补以默认值. 原文:C/C++数组初始化的一些误区 以前我这样初始化一个数组,并自我感觉良好: ] = { }; // 全部初始化为0 这种简 ...

  8. 安装Subversion1.82（SVN）

    安装Subversion1.82(SVN)插件 简介    :SVN是团队开发的代码管理工具,它使我们得以进行多人在同一平台之下的团队开发. 解决问题:Eclipse下的的SVN插件安装. 学到    ...

  9. Perl字符集就是方括号（或称中括号）里一连串可能的字符，只匹配单一字符，该单一字符可以是字符集里的任何一个，“-”在字符集里有特殊含义：表示某个范围的字符。而字符集意外的连字符不具有特殊意义。

    Perl字符集就是方括号(或称中括号)里一连串可能的字符,只匹配单一字符,该单一字符可以是字符集里的任何一个,“-”在字符集里有特殊含义:表示某个范围的字符.而字符集意外的连字符不具有特殊意义.

  10. css的存在形式

    1.css的样式,可以写在head头中: 1).通过ID(#CC{}) 2).通过class (.cc{}) 2.可以将样式,单独写入css的某一个页中 1)通过在head头中,引改该css样式,通过 ...