简介

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. low-code

    low-code特点: 1. 一个创造软件的开发环境,类似vs-code: 2. 通过可视化拖拽和参数配置高效开发. 1. 背景 1.1 目标 需求的交付质量和交付效率一直是中后台项目开发中非常关注的 ...

  2. Qt：QTableWidgetItem

    0.说明 QTableWidgetItem指明QTableWidget中的一个Item.Item通常包含文本.图标.checkbox. 最常用的构造Item的方式是:不指定该Item所在的TableW ...

  3. qyqt5（一）

    一.PyQt窗口处理 1. 第一个PyQt窗口 from PyQt5.QtWidgets import QApplication,QWidget import sys # 1.创建应用程序 app = ...

  4. Goland sync.Map大白话解析

    Goland sync.Map大白话解析 代码解析链接:https://mp.weixin.qq.com/s/H5HDrwhxZ_4v6Vf5xXUsIg 建议对照参考链接代码食用 结构体 可以简单理 ...

  5. LeetCode-047-全排列 II

    全排列 II 题目描述:给定一个可包含重复数字的序列 nums ,按任意顺序 返回所有不重复的全排列. 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:https://lee ...

  6. Visual Studio双击打开项目而不是项目属性文件

    从VS2019版本就默认勾选了这个,每次打开都是到属性文件,这个根本用不到,点击小三角又比较麻烦,不知道为啥微软给了这个默认功能 VS2022 Preview也是,默认勾选 勾选如下即可:

  7. Flume介绍安装使用

    APache Flume官网:http://flume.apache.org/releases/content/1.9.0/FlumeUserGuide.html#memory-channel 目录 ...

  8. Linux命令大全（查看日志）

    1.查看日志常用命令     tail:          -n  是显示行号:相当于nl命令:例子如下:             tail -100f test.log      实时监控100行日 ...

  9. Java学习笔记:04面向对象-内部类_访问修饰符_final

    04面向对象-内部类/访问修饰符/final 1.static的介绍 static:关键字,静态的 static的作用是用来修饰类中的成员 2.访问一个类中的某一个成员变量 方法一: _1.创建对象 ...

  10. git命令新建远程分支并推送，切换远程地址

    最近记性不好,老是忘记操作命令,记录下一下新建远程分支和切换.删除远程地址的命令: 1.查看当前分支:  git branch 2.查看所有分支:git branch -a 3.切换分支:git ch ...