zTree -- jQuery 树插件使用方法与例子

hightopo 发布于2019-08-19 17:44 / 2506人阅读

摘要：简介是一个依靠实现的多功能树插件。使用说明下载文件将需要使用的相关的文件分别放置到相应目录，并且保证相对路径正确。页面分别在和中引入文件，如代码所示。设置是否显示节点的图标。

简介

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

网址：http://www.ztree.me/v3/main.p...

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

这里不再赘述。

使用说明

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

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

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

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

示例代码

html代码：

js代码：

（这些代码，我写在了按习惯的相应页面html同名的.js文件中，在引入的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 数据对象详细介绍。

云服务器 GPU云服务器 ztree插件 jquery_easyui树 jquery插件源码jquery jquery插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78795.html

zTree -- jQuery 树插件构造treeNode JSON 数据对象

摘要：前言是一个依靠实现的多功能树插件。不同的树目录根据不同的数据，在服务器端编写好不同的，将其配置在这里即可。依赖获取的数据类型，默认值。依赖用于对返回数据进行预处理的函数。详细说明参见文档代码还是树插件使用方法与例子中的那个，不在重复粘贴。前言 zTree 是一个依靠 jQuery 实现的多功能树插件。网址：http://www.ztree.me/v3/main.p... 上回说到...

周国辉 2019-08-21 10:50 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

LiangJ 2019-08-30 12:58 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

codercao 2019-08-19 18:10 评论0 收藏0
前端技术博客文章、书籍积累

摘要：好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行书籍《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹（修订版）》《JavaScript设计模式》《J...

huayeluoliuhen 2019-08-01 15:13 评论0 收藏0