简介

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. java ssh远程服务器并执行多条shell命令

    java ssh远程服务器并执行多条命令 import java.io.BufferedReader; import java.io.IOException; import java.io.Input ...

  2. salesforce零基础学习（一百一十二）项目中的零碎知识点小总结（四）

    本篇参考: https://trailblazer.salesforce.com/issues_view?id=a1p4V0000003znDQAQ https://salesforce.stacke ...

  3. LabVIEW,控件快捷菜单,温度转换

    目前正在自学LabVIEW,深感困难重重,我将偶尔发表一些自己的收获,自认为算是干货了, 搜到这篇随笔的朋友们或多或少遇到了些许困难,希望这能帮助到你们. 内容:练习使用LabVIEW中的控件快捷菜单 ...

  4. 宇宙最強的IDE - Visual Studio 25岁生日快乐

    每位开发者从入门开始或多或少都会接触过 Visual Studio , 现今的 Visual Studio 除了支持传统的 C++ , C# , Visual Basic.NET ,F# 的编程语言外 ...

  5. 手把手教你写一个SpringMVC框架

    一.介绍 在日常的 web 开发中,熟悉 java 的同学一定知道,Spring MVC 可以说是目前最流行的框架,之所以如此的流行,原因很简单:编程简洁.上手简单! 我记得刚开始入行的时候,最先接触 ...

  6. Spring data jpa 报错: java.sql.SQLSyntaxErrorExceptoion: Table ' test.hibernate_sequence' doesn`t exists

    错误信息如图: 错误原因:在自定义主键是没有注明自增策略 解决办法:明确主键自增策略,比如 @Entity @Table(name = "t_order") @Data @AllA ...

  7. java 知识点梳理

    1.ArrayList与linkedList 区别 ArrayList 采用的是数组形式来保存对象的,这种方式将对象放在连续的位置中,所以最大的缺点就是插入删除时非常麻烦; 优点是查找比较快. Lin ...

  8. Wireshark DTN解析器拒绝服务漏洞

    受影响系统:Wireshark Wireshark 2.2.0 - 2.2.1Wireshark Wireshark 2.0.0 - 2.0.7描述:CVE(CAN) ID: CVE-2016-937 ...

  9. 嵌入式无操作系统下管理内存和队列(类UCOS II思想)

    例子:存储日志,最多存128条,每条最大1MB. 内存方面 因为嵌入式不适合用动态内存,会产生碎片.这里我们用 u8 data[LOG_SIZE];开辟固定128MB的内存区,再对其分为128个1MB ...

  10. Windows安全加固手册

    1      身份鉴别 1.1         密码安全策略 要求:操作系统和数据库系统管理用户身份鉴别信息应具有不易被冒用的特点,口令应有复杂度要求并定期更换. 目的:设置有效的密码策略,防止攻击者 ...