简介

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. 【译】C# 11 特性的早期预览

    原文 | Kathleen 翻译 | 郑子铭 Visual Studio 17.1(Visual Studio 2022 Update 1)和 .NET SDK 6.0.200 包含 C# 11 的预 ...

  2. MySql的事务及数据的导入导出

    Mysql的事务及应用 1.补充数据库的导入与导出 导入 mysql -u root -p database < E:/SS/Test.sql -- 即执行sql文件 导出 -- 结构+数据 m ...

  3. mplus数据分析：增长模型潜增长模型与增长混合模型再解释

    混合模型,增长混合模型这些问题咨询的同学还是比较多的,今天再次尝试写写它们的区别,希望对大家进一步理解两种做轨迹的方法有帮助. 首先,无论是LCGA还是GMM,它们都是潜增长模型的框框里面的东西: L ...

  4. 关于Web的一些知识，Web怎么构成？

    前端学习:学习地址:黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动,下面这些都是一些学习笔记.临渊羡鱼,不如退而结网!!愿我自己学有所成,也愿每个前端爱好者学有所成 ...

  5. tp6 的安装步骤 及简易命令

    1:https://www.kancloud.cn/manual/thinkphp6_0/1037481 官网下载 composer create-project topthink/think tp6 ...

  6. php 23种设计模型 - 策略模式

    介绍 意图:定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换,用户还不需要知道其具体的实现 主要解决:在有多种算法相似的情况下,使用 if...else 所带来的复杂和难以维护. 何时使 ...

  7. 怎么做 HDFS 的原地平滑缩容？

    背景 当数据规模越来越大,存储成本也水涨船高.随着时间推移,数据热度分布往往呈 2⁄8 原则,即 80% 的访问集中在 20% 的数据上.对于那不经常访问的 80% 数据来说,使用多个 SSD 来存储 ...

  8. 如何修改windows Server 2012 远程桌面连接默认端口

    如何修改windows Server 2012 远程桌面连接默认端口   修改windows 2012/win8.win7远程桌面连接默认端口一般需要修改注册表四个地方[HKEY_LOCAL_MACH ...

  9. margin 塌陷bug 触发bfc

    1.bfc block format context 2.如何触发一个盒子的bfc position:absolute; display: inline-block float:left/right; ...

  10. Linux三剑客命令使用（持续更新）

    (本文档内容部分来源于网络) awk删除文件第一列 1.采用awk awk '{$1="";print $0}' file 2.采用sed sed -e 's/[^]* //' f ...