<%@ 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. Kickstart Round D 2017 : A

    思路: 动态规划. large数据的时间范围很大,无法设计入状态中.转换思路为定义dp[i][j]为当前在景点i,并且已经游览了j个景点所花费的最小时间,这种思想与leetcode45类似.于是转移方 ...

  2. android环境搭建环境 cordova run android gradle wrapper报错

    cordova run android命令报错 Error: Could not find an installed version of Gradle either in Android Studi ...

  3. 解决qt提示：qt.network.ssl: QSslSocket: cannot call unresolved function DH_free和qt.network.ssl: QSslSocket: cannot call unresolved function d2i_DHparams

    转载请注明出处:https://i.cnblogs.com/EditPosts.aspx?postid=7127254 运行环境:VS2015&Qt5.8 方法一(未能解决):把C:\Qt\Q ...

  4. pdf 使用模板下载

    //根据模板下载模板 /** * * 政策5-8条的创建的pdf的模板 */public String createPdfCashTemplate(PdfCashParam pdfCashParam) ...

  5. WPF小记 -- 使用Path自己画图标，点击命中(焦点)丢失问题

    在Template中,Path外面的Grid需添加Background属性值.否则点击范围会受限制,例如:Click,在RadioButton的Height和With范围内点击,命中率<1. & ...

  6. CAD交互绘制带颜色宽度的直线（com接口）

    用户可以在控件视区任意位置绘制直线. 主要用到函数说明: _DMxDrawX::DrawLine 绘制一个直线.详细说明如下: 参数 说明 DOUBLE dX1 直线的开始点x坐标 DOUBLE dY ...

  7. 获取当前时间（日期格式） && 获取当前加一年的时间（日期格式）

    获取当前时间,日期格式function currentDate() { var date = new Date(); var y = date.getFullYear(); var m = date. ...

  8. 面试之Redis

    面:缓存中间件--Memcached和Redis的区别是什么? 答:Memcached的优点是简单易用,代码层次类似与Hash.支持简单数据类型,但不支持数据持久化存储,也不支持主从同步,也不支持分片 ...

  9. CF1065D Three Pieces

    题目描述:给出一个n*n的棋盘,棋盘上每个格子有一个值.你有一个子,要求将这个子从1移到n*n(去k时可以经过比k大的点). 开局时它可以作为车,马,相(国际象棋).每走一步耗费时间1.你也可以中途将 ...

  10. 零基础入门学习Python（19）--函数：我的地盘听我的

    知识点 函数与过程 在许多编程语言中,函数(function)是有返回值的,过程(procedure)是简单.特殊并且没有返回值的.而在Python中,严格来说只有函数没有过程. 例如: >&g ...