<%@ 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. 移动端展示pdf（在线打开pdf）

    需求:在手机微信浏览器或者其他浏览器中打开pdf 准备:前端插件:查找pdf.js  官网地址:http://mozilla.github.io/pdf.js/ 在官网中下载demo 注释:pdf的d ...

  2. Python学习 Day 2-数据类型和变量

    数据类型和变量 在Python中,能够直接处理的数据类型有以下几种: 整数 Python可以处理任意大小的整数,当然包括负整数,在程序中的表示方法和数学上的写法一模一样,例如:1,100,-8080, ...

  3. InChatter系统之客户端实现原理与阶段小结

    InChatter客户端的开发可以说是目前系统的阶段性结尾了.很抱歉的是,这篇文章来的这么晚,迟到了这么久. 在客户端的开发主要针对两个方面: 消息的传输与处理 消息的UI交互处理 一.消息的传输与处 ...

  4. Farseer.net轻量级开源框架 中级篇：Cookies、Session、Request

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 中级篇: 探究ORM(Mapping) 下一篇:Farseer.net轻量级开源框架 中级篇 ...

  5. AIX 10201 ASM RAC安装+升级到10204

    1:查看系统版本 [rac1:root:/hacmp/hacmp5.4/ha5.4/installp/ppc] oslevel -s 6100-06-06-1140 lslpp -al bos.adt ...

  6. Divide and Conquer_1.最大连续子数组

    给定一个数组,求它的一个子数组,使其求和最大. 这个问题的应用:给定一只股票很多天的价格,计算从哪天买进哪天卖出能获得最大利润. 给定 prices:100   113   98   87   65  ...

  7. Swift protocol extension method is called instead of method implemented in subclass

    Swift protocol extension method is called instead of method implemented in subclass protocol MyProto ...

  8. confluence的安装

    参考链接:https://www.ilanni.com/?p=11989 一.什么是confluence confluence是一个专业的企业知识管理与协同软件,可以用于构建企业wiki.通过它可以实 ...

  9. cookie和session的用法用途,执行流程,区别联系

    1.为什么要有cookie/session?在客户端浏览器向服务器发送请求,服务器做出响应之后,二者便会断开连接(一次会话结束).那么下次用户再来请求服务器,服务器没有任何办法去识别此用户是谁.比如w ...

  10. （独孤九剑）--PHP简介与现况

    (1)为什么学习PHP? 1.好就业: 2.入门简单,学习周期短,两个月即可: 3.学习编程思路,使编程习惯更加规范: 4.大公司直招: 5.处理大并发数据: 6.开源,所以更加安全 (2)PHP是什 ...