简介

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。

网址：http://www.ztree.me/v3/main.php#_zTreeInfo

上面的网址里有ztree的详细介绍、Demo 演示、API 文档、入门指南 以及下载。

这里不再赘述。

使用说明

1、下载ztree文件
将需要使用的 zTree v3.x 相关的 js、css、img 文件分别放置到相应目录，并且保证相对路径正确。
2、引入ztree文件
将下载的ztree文件保留需要用的相关的 js、css、img 文件整个复制到自己的项目相应的文件夹下，如下图，我习惯将这类插件统一放在common/plugin/下，（其他不需要用的文件可以删除。

3、html 页面
分别在<head>和<body>中引入css、js文件，如代码所示。

按照以下代码，制作 html 页面，注意：

zTree 的容器 className 别忘了设置为 "ztree"！！！

示例代码

  • html代码：
    <!DOCTYPE html>
    <html lang="en-us">

      <head>
    
     <meta charset="utf-8">
    
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

     <title>ztreeDemo</title>
    
     <link rel="stylesheet" href="../../../common/plugin/ztree/zTreeStyle.css" type="text/css">

  </head>
    
  <body>
    
     <div class="row">
    
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 pt10">
    
            <div class="well sidebar-nav ">
    
                <ul id="planTree" class="ztree"></ul>
    
        </div>
    
    </div>

    <!-- zTree  这里使用的 all.js = core + excheck + exedit ( 不包括 exhide )-->
    
    <script src="../../../common/plugin/ztree/jquery.ztree.all.min.js"></script>
    
     <!--my zTree  这里引入的是下面所示的js代码文件 -->
    
    <script src ="../../../common/js-data/mytree.js"></script>
    
    </body>

    </html>

  • js代码：
    （这些代码，我写在了按习惯的相应页面html同名的.js文件中，在<body>引入的ztree.all.min.js之下，将该文件引入页面即可。）

     $(function () {
    
   init();
    
 });

 function init() {
    
   builePlanTree();
    
 }

//ZTREE
    
 function builePlanTree() {
    
    var setting = {
    
     view: {
    
       showIcon: true//设置 zTree 是否显示节点的图标。
    
       },
    
     data: {
    
       simpleData: {
    
         enable: true
    
        }
    
    },
    
    callback: {
    
     // beforeExpand: beforeExpand,
    
     // onExpand: onExpand,
    
     onClick: zTreeOnClick
    
  }
    
}

var zNodes =[
    
 { id:1, pId:0, name:"课程目录", open:true},
    
 { id:11, pId:1, name:"季度产品知识课程", open:true},
    
 { id:111, pId:11, name:"13Q4产品知识", },
    
 { id:112, pId:11, name:"14Q1产品知识", },
    
 { id:113, pId:11, name:"14Q2产品知识", },
    
 { id:114, pId:11, name:"14Q3产品知识", },
    
 { id:115, pId:11, name:"14Q4产品知识", },
    
 { id:12, pId:1, name:"项目宣讲类课程", open:true},
    
 { id:121, pId:12, name:"项目宣讲类课程1"},
    
 { id:122, pId:12, name:"项目宣讲类课程2"},
    
 { id:123, pId:12, name:"项目宣讲类课程3"},
    
 { id:13, pId:1, name:"移动商学院", open:true},
    
 { id:131, pId:13, name:"技能类"},
    
 { id:132, pId:13, name:"心态类"},
    
 { id:132, pId:13, name:"知识类"}

    ];

      $.fn.zTree.init($("#planTree"), setting, zNodes);

     function zTreeOnClick(event, treeId, treeNode) {
    
     //这里定义点击书中节点时，相应的页面其他的操作，示例：
    
     // 每次点击节点后， 弹出该节点的 tId、name 的信息
    
     alert(treeNode.tId + ", " + treeNode.name);
    
     };

 }

这样页面上的树目录就成了，效果如下图所示：

总结

很明显，这样的树只是一个静态固定节点的树，在大型项目中，往往需要不同的用户看到不同的目录，不同的地区显示不同的目录，等等，但你又不能一个一个定义这些配置来满足那么多数据需求，所以就需要异步加载子节点的的父节点，通过构造treeNode的 JSON 数据对象方法来实现，这个方法会在本专栏 后面 zTree -- jQuery 树插件 构造treeNode JSON 数据对象 文章给写出（未完 待续） 。

zTree -- jQuery 树插件 使用方法与例子的更多相关文章

  1. zTree -- jQuery 树插件

    http://www.ztree.me/v3/main.php#_zTreeInfo http://plugins.jquery.com/zTree.v3/ 例子:http://www.ztree.m ...

  2. 主攻ASP.NET.4.5.1 MVC5.0之重生:在项目中使用zTree jQuery 树插件

    效果图和json格式 Controllers代码 using HR.Models; using HR.Models.Repository; /***************************** ...

  3. zTree -- jQuery 树插件实现点击文字展开子节点

    新版本的zTree是单击+号展开子项,点击文字选中该项,双击文字展开子项 项目用的是3.5版本的,如果要点击文字展开子项暂时没查到资料,自己琢磨了下 项目用的是jquery.ztree.core-3. ...

  4. zTree 优秀的jquery树插件

    zTree 优秀的jquery树插件,文档详细,渲染快 使用方法: 1.引用zTree的js和css文件 <link href="~/Content/zTree_v3/css/zTre ...

  5. 顶级jQuery树插件

    顶级jQuery树插件 顶级jQuery树插件 2013-03-05 17:20 139人阅读 评论(0) 收藏 举报 jsTree JsTree是一个基于jQuery的Tree控件.支持HTML.J ...

  6. ASP.NET MVC jQuery 树插件在项目中使用方法（一）

    jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...

  7. jquery编写插件的方法

     版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...

  8. 再谈：jquery编写插件的方法

    版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...

  9. Jquery开发插件的方法

    Jquery未开发插件提供了两个方法: (1)Jquery.extend(object)    -为Jquery类本身添加新的方法;代码如下: $.extend({ add:function(a,b) ...

随机推荐

  1. LeetCode-082-删除排序链表中的重复元素 II

    删除排序链表中的重复元素 II 题目描述:存在一个按升序排列的链表,给你这个链表的头节点 head ,请你删除链表中所有存在数字重复情况的节点,只保留原始链表中 没有重复出现 的数字. 返回同样按升序 ...

  2. python 逻辑运算及奇怪的返回值（not,and,or）

    首先,'and'.'or'和'not'的优先级是not>and>or. 同一优先级从左往右计算. 先说非运算,Python的非运算与这些语言相比,并没有特别的地方.not只有两个返回值,T ...

  3. jarvisoj_level3

    自己的第一篇博客 *其实很早就想写博客了但是自己安全学的比较晚而且也很菜,现在虽然还是比较菜但是也是有一些心得的 *第一个问题什么是ctf,根据某度来说:CTF(Capture The Flag)中文 ...

  4. NTFS权限详解

    NTFS权限是作为一个Windows管理员必备的知识,许多经验丰富的管理员都能够很熟悉地对文件.文件夹.注册表项等进行安全性的权限设置,包括完全控制.修改.只读等.而谈论NTFS权限这个话题也算是老生 ...

  5. LGP5204题解

    @CF1327F 最小值看着有点怪,先转化成最大值吧...反正没啥区别... 考虑把最大值相同的区间和限制为这个最大值的区间都拿出来.然后离散化.问题变为让所有区间都满足最值为 \(c\). 考虑 D ...

  6. 2022年官网下安装DBever最全版与官网查阅方法

    目录 安装部署DBeaver 一.官网下载安装 1.百度搜索DBeaver. 2.进入主页,点击DownLoad下载. 3.查看列表,选择windows的exe版本下载. 4.找到位置,双击打开,弹出 ...

  7. 浏览器输入URL，按下回车后发生什么？

    大致流程 URL 解析 DNS 查询 TCP 连接 服务器处理请求 浏览器接受响应 浏览器解析渲染页面 断开连接

  8. Java基础——Arrays类

    概述: Arrays类包含用于操作数组的各种方法,常用的有以下几种 方法名 说明 public static String toString(int[]a) 返回指定数组的内容的字符串表达形式 pub ...

  9. 在Ubuntu 18.04上使用msmtp和gmail，git-sendemail发送patch给kernel

    这是我第一次发送patch给kernel,虽然仅仅是一个test的patch,但我也觉着很新奇,这也是自己的一个小小的进步. 如下是从各种网站上学到的如何发送patch的总结. 1. Create g ...

  10. [root-me](web-client)write up 一个大坑怎么填啊

    root-me web-client writeup 地址:www.root-me.org HTML - disabled buttons 打开网页发现按钮不能按,查看源代码,有 'disabled' ...