简介

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. WIN10:全选一个文件夹中的所有文件

  2. LeetCode-091-解码方法

    解码方法 题目描述:一条包含字母 A-Z 的消息通过以下映射进行了 编码 : 'A' -> 1 'B' -> 2 ... 'Z' -> 26 要 解码 已编码的消息,所有数字必须基于 ...

  3. 测试平台系列(90) 编写oss客户端

    大家好~我是米洛! 我正在从0到1打造一个开源的接口测试平台, 也在编写一套与之对应的教程,希望大家多多支持. 欢迎关注我的公众号米洛的测开日记,获取最新文章教程! 回顾 上一节我们编写了在线执行测试 ...

  4. 2022最新IntellJ IDEA诺依开发部署文档

    前景提示 若伊是国内一款很好的开源项目,非常的便于学习,而且它是开源免费的,但是,它的开发部署文档实在是没法按照那个文档,快速高效的在本地搭建一套可以运行的项目,对于学习开发和使用实在是一大难题,为此 ...

  5. PHP魔术方法11种

    1.构造函数:__construct(): 构造函数是类中的一个特殊函数,当我们使用new关键字实例化对象时,相当于调用了类的构造函数. function __construct($name){ $t ...

  6. 微信小程序结合原生JS实现电商模板（二）

    接 <微信小程序结合原生JS实现电商模板(一)>,在首页列表加入购物车到购物和模块增删数量,动态计算商品价格实现后,本次提交主要实现了商品详情(还不完善)简单页面,从商品详情页跳转到购物车 ...

  7. SoftwareTeacher直播自我感想

    今天老师发布了一个链接直播是关于:同学们聊聊学习软件工程,CS 课程的问题下面是我的个人感悟和笔记 一.编程技术的提升 编程并不是一件很难的事情,就如开车一样,只有多加练习,自己的技术才能提升上去.拿 ...

  8. 【Calculate】Calculate Linux安装操作记录

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 一.Calculate简介 Calculate Linux 是一个基于 Gentoo的发行版本. Calculate 目录服务器 (CDS) 是一 ...

  9. oracle 11g生成ASH报告操作过程

    1.ASH (Active SessionHistory) ASH以V$SESSION为基础,每秒采样一次,记录活动会话等待的事件.不活动的会话不会采样,采样工作由新引入的后台进程MMNL来完成. v ...

  10. 内网渗透----Linux信息收集整理

    一.基础信息收集 1.查看系统类型 cat /etc/issue cat /etc/*-release cat /etc/lsb-release cat /etc/redhat-release 2.内 ...