<%@ 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. Android 7.0 因为file://引起的FileUriExposedException异常

    最近作者又碰到因为android 7.0 引起的兼容问题了. 在7.0以前的版本: //创建临时图片 File photoOutputFile = SDPath.getFile("temp. ...

  2. iOS - 事件处理全过程（补充）

    事件处理的完整过程 1> 先将事件对象由上往下传递(由父控件传递给子控件),找到最合适的控件来处理这个事件. 2> 调用最合适控件的touches….方法 3> 如果调用了[supe ...

  3. 【译】x86程序员手册37-第10章 初始化

    Chapter 10 Initialization 第10章 初始化 After a signal on the RESET pin, certain registers of the 80386 a ...

  4. ascii - 在八进制，十进制，十六进制中的 ASCII 字符集编码

    描述 ASCII 是美国对于信息交换的标准代码,它是7位码,许多8位码(比如 ISO 8859-1, Linux 的默认字符集)容纳 ASCII 作为它们的下半部分.对应的国际 ASSII 是 ISO ...

  5. get data from splunk

    link: http://dev.splunk.com/view/python-sdk/SP-CAAAER5 download SDK & setup with python code: im ...

  6. react入门（下）

    react生命周期 1. 组件的三个生命周期状态: * Mount:插入真实 DOM * Update:被重新渲染 * Unmount:被移出真实 DOM2. React 为每个状态都提供了两种勾子( ...

  7. ES5和ES6新的操作数组的方法(常用)

    // 普通的for循环// var arr = ['张飞', '赵云', '马超', '刘备']// for (var i = 0; i < arr.length; i++) {// conso ...

  8. Layui表格之多列合并展示

    前言: 当我们在使用Layui的时候,有时表格中的列比较多,展示出来肯定是有问题的,这样就不得不舍弃一些列不展示,不展示是一种解决方案,但是更好的解决方案应该是合并展示. 这里的展示不是合并单元格,合 ...

  9. Python 面向对象 组合-多态与多态性-封装-property

    面向对象-组合 1.什么是组合 组合指的是某一个对象拥有一个属性,该属性的值是另外一个类的对象 class Foo: xxx = 111 class Bar: yyy = 222 obj = Foo( ...

  10. 4. GC 算法(实现篇) - GC参考手册

    您应该已经阅读了前面的章节: 垃圾收集简介 - GC参考手册 Java中的垃圾收集 - GC参考手册 GC 算法(基础篇) - GC参考手册 学习了GC算法的相关概念之后, 我们将介绍在JVM中这些算 ...