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

    pageEncoding="UTF-8"%>

<!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">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">

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

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

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

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

</head>

<body class="easyui-layout">

    <!-- data-options如果html元素是easyui组件，可以用data-options设置属性 -->

    <div region="north" style="height: 100px" title="xxx系统">北部区域</div>

    <div data-options="region:'west'" style="width: 150px" title="系统菜单">

        <!-- 展示折叠面板 -->

        <div class="easyui-accordion" data-options="fit:true">

            <div title="基本功能">

                <a id="btn" class="easyui-linkbutton" data-options="iconCls:'icon-save'">点击</a>

                <script type="text/javascript">

                    $("#btn").click(function(){

                        //判断

                        var r = $("#myTabs").tabs('exists','测试面板');

                        if(r){

                            //选中

                            $("#myTabs").tabs('select','测试面板');

                        }else{

                            //调用tabs组件方法。中部区域中tabs选项卡 添加新面板

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

                                title:'测试面板',

                                iconCls:'icon-add',

                                closable:true,

                                content:'<iframe src="../pages/base/area.jsp" frameborder="0" width="100%" height="100%"></iframe>'

                            });

                        }

                    })

                </script>

            </div>

            <div title="系统管理">

                <ul id="menu" class="ztree"></ul>

                <script type="text/javascript">

                   $(function(){

                       //配置信息

                       var setting2 = {

                            data: {

                                simpleData: {

                                    enable: true,  //开启简单数据模式

                                    idKey: "id",    //数据标识

                                    pIdKey: "pId",  //父节点标识

                                    rootPId: 0      //顶级节点

                                }

                            },

                            callback: {

                                onClick: function(event, treeId, treeNode){  //单击事件

                                    //判断节点是否可以点击

//                                     alert(treeNode.page);

                                    if(treeNode.page != undefined){

                                        //treeNode,单击某一节点数据：json对象

                                        //{ "id":"111", "pId":"11", "name":"基础档案设置",  "page":"pages/base/archives.jsp"},

    //                                     alert(treeNode);

    //                                     console.info(treeNode);//在浏览器控制台输出

                                        //判断

                                        var r = $("#myTabs").tabs('exists',treeNode.name);

                                        if(r){

                                            //选中

                                            $("#myTabs").tabs('select',treeNode.name);

                                        }else{

                                            //调用tabs组件方法。中部区域中tabs选项卡 添加新面板

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

                                                title:treeNode.name,

                                                iconCls:'icon-add',

                                                closable:true,

                                                content:'<iframe src="../'+treeNode.page+'" frameborder="0" width="100%" height="100%"></iframe>'

                                            });

                                        }

                                    }

                                    }

                            }

                        };

                       //数据从json文件中

                       $.post("../data/menu.json",{},function(data){

                           $.fn.zTree.init($("#menu"), setting2, data);

                       });

                   })

                </script>

            </div>

        </div>

    </div>

    <div data-options="region:'center'">

        <!-- 展示选项卡面板 -->

        <div id="myTabs" class="easyui-tabs" data-options="fit:true">

            <div title="基本功能"></div>

        </div>

    </div>

<!--     <div data-options="region:'east'" style="width: 150px">东部区域</div> -->

    <div data-options="region:'south'" style="height: 50px">南部区域</div>

</body>

</html>

Jquery ztree树插件2的更多相关文章

  1. JQuery Ztree 树插件配置与应用小结

    JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...

  2. Jquery ztree树插件

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

  3. easyui&8Jquery ztree树插件

    7Jquery easyui前台UI框架 开发包: 7.1Layout页面布局 将课后资料中后台系统前台页面素材导入项目中 1.导入Jquery,easyui相关js,css文件 <link r ...

  4. 基于jquery下拉列表树插件代码

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...

  5. 树结构数据的展示和编辑-zTree树插件的简单使用

    最近在项目当中遇到一个需求,需要以树结构的方式展示一些数据,并可对每一个树节点做内容的编辑以及树节点的添加和删除,刚好听说有zTree这个插件可以实现这样的需求,所以在项目的这个需求完成之后,在博客里 ...

  6. 在vue中使用ztree树插件

    插件资源及api:树官网 本事例是在vue3.0+中演示,事例是实际项目中正在用的组件所以部分打了马赛克. 1.插件准备(提前准备好插件文件) 可以直接在官网下载,搭建好脚手架后将准备好的文件放在li ...

  7. 项目一:第一天 1、项目概述 2、环境搭建（重点） 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

    1.项目环境 注:添加jar包直接在common_parent里面添加. 搭建数据库 create tablespace bos317space datafile 'c:\ bos317.dbf'   ...

  8. Jquery的树插件jqxTreeGrid的使用小结

    一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...

  9. Jquery的树插件jqxTreeGrid的使用小结（实现基本的增删查改操作）

    一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...

随机推荐

  1. 静态变量和Session

    静态变量: Application级别的,不同客户端访问同一个变量. Session:对于每个访问的客户端是独立的,都有一个唯一的SessionID.也就是说,不同客户端下,都可以有一个Session ...

  2. c#面向对象-类（类及其构成）

    学习c#已经快一个学期,在这一段时间里,通过自己的努力和老师指导,自己感觉收获颇丰,所以我想把自己学到东西整理一下,供大家点评!若有错误或不当之处,敬请指出. 今天,我先从类及其构成说起! 1.    ...

  3. Python3 从入门到出门

    引:此文是自己学习python过程中的笔记和总结,适合有语言基础的人快速了解python3和没基础的作为学习的大纲,了解学习的方向:笔记是从多本书和视频上学习后的整合版. (一)初识python 1. ...

  4. AugularJS从入门到实践（一）

      前  言  前端    AngularJS是为了克服HTML在构建应用上的不足而设计的.(引用百度百科) AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷.Angu ...

  5. 使用Jenkins进行持续集成ionic3项目

    Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.  网上大多数是关于.net web网站以及 ...

  6. Javascript Prototype __proto__ constructor 三者的关系

    JavaScript三大毒瘤 --- this,原型链,作用域 在我等菜鸟一步一步升级中的过程中,这三个概念总是困扰这我们(可能只有我吧,我比较蠢).这三个东西往往都很绕,今天我就来分享一下我对原型. ...

  7. vue 自定义组件

    1.Vue.component('component-test', { props:{}, data:function(){ return{} }, mounted:function(){}, com ...

  8. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

  9. Ubuntu14.04_x64_Caffe_GPU环境配置

    为了让Caffe支持GPU模式,需要安装GPU和CUDA Toolkit,依据NVIDIA官方教程以ubuntu14.04_X64安装cuda8.0,配置Gpu为例如下所示: 1.检查安装环境,是否具 ...

  10. Java开源博客My-Blog(SpringBoot+Docker)系列文章

    My Blog 1.Docker+SpringBoot+Mybatis+thymeleaf的Java博客系统开源啦 2.My-Blog搭建过程:如何让一个网站从零到可以上线访问 3.将数据的初始化放到 ...