<%@ 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. poj3368 Frequent values

    思路: 转化为RMQ. 实现: #include <cstdio> #include <cstring> #include <algorithm> using na ...

  2. Wamp搭建的服务器登录的时候出现Access denied for user 'hello'@'localhost' (using password: YES)

    想用自己电脑做一个服务器,然后就选择了Wamp,本来一切顺利,可是到登录的时候却出现了问题,出现了 Access denied for user 'hello'@'localhost' (using ...

  3. JS中的对象之原型

    对象 ECMAScript做为一个高度抽象的面向对象语言,是通过_对象_来交互的.即使ECMAScript里边也有_基本类型_,但是,当需要的时候,它们也会被转换成对象. 一个对象就是一个属性集合,并 ...

  4. spring 获取ApplicationContext

    第一种:获取根目录下的文件名 ApplicationContext ac = new ClassPathXmlApplicationContext("../mvc-dispatcher-se ...

  5. list.extend的结果是None

    执行list.exend()方法后,会直接修改list本身,而不会产生返回值 In [97]: d=(43,) In [98]: type(d) Out[98]: tuple In [99]: c O ...

  6. 循环冗余校验（CRC）算法入门

    http://blog.csdn.net/liyuanbhu/article/details/7882789 前言 CRC校验(循环冗余校验)是数据通讯中最常采用的校验方式.在嵌入式软件开发中,经常要 ...

  7. vue之$mount

    数据挂载 在实例化Vue的时候,两种方式挂载数据 方法一:最常用的方法 var app=new vue({ el:"#app", data(){} ````` }) 注:文档中最常 ...

  8. mysql 优化策略

    from:https://dbaplus.cn/news-155-1531-1.html MySQL逻辑架构 如果能在头脑中构建一幅MySQL各组件之间如何协同工作的架构图,有助于深入理解MySQL服 ...

  9. 三、spring中高级装配（1）

    大概看了一下第三章的内容,我从项目中仔细寻找,始终没有发现哪里有这种配置,但是看完觉得spring还有这么牛B的功能啊,spring的厉害之处,这种设计程序的思想,很让我感慨... 一.环境与prof ...

  10. 字符与数字的转换：sprintf和sscanf

    目录 字符与数字的转换:sprintf和sscanf 简单介绍 实例 运行结果 字符与数字的转换:sprintf和sscanf 简单介绍 sprintf和sscanf都是stdio.h头文件中的函数, ...