zTree入坑指南

我工作中写的一个功能，点击下面的链接进行访问：（点击页面中唯一的按钮）

点击查看实现后的效果：（进入后点击页面中的按钮）

本文主要是讲一下我学习 zTree 的心得，以及工作使用中遇到的坑，仅供参考

学习技巧

一、简要介绍：

点击进入官网
个人理解： zTree 是一款国产的文件树 jQuery 插件, 可以用来做资源管理器，或者用作文件查看器等…
官网介绍： zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 zTree 是开源免费的软件（MIT 许可证）。
- zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
- 采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
- 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
- 支持 JSON 数据
- 支持静态和 Ajax 异步加载节点数据
- 支持任意更换皮肤 / 自定义图标（依靠css）
- 支持极其灵活的 checkbox 或 radio 选择功能
- 提供多种事件响应回调
- 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
- 在一个页面内可同时生成多个 Tree 实例
- 简单的参数配置实现灵活多变的功能

二、学习方法

首先到 github 或 码云 下载最新源码，下载包里面，有你学习zTree必须的所有资源，毫不夸张的讲，该下载包绝对足以让你学会zTree,我在学习的时候，在官网买作者的20元教程，然并卵！
1. 解压该下载包：
  解压后的文件名为： zTree_v3
2. 使用该文件夹进行学习即可，不过，最最最关键的一点是，你必须要有一个本地web服务环境, 关于本地web服务环境的搭建十分简单，可以参照我之前写的文章实现百度搜索功能教程里面的第四章，那里有详细的介绍
3. 有一点，需要你明确的，那就是，我个人只学习了zTree 核心代码部分（jquery.ztree.core.js），因为对于我而言已经够用了！
很好，如果你已经搭建好了本地服务环境，访问： http://localhost/zTree_v3/api/API_cn.html, 可以进入zTree 提供的API文档界面，里面包含了 zTree 所有的使用方法；如果你，已经打开了此页面，你尝试点击一下里面的每一个 API 会有一个弹框，这个弹框会介绍这个API的具体使用方法，要求你必须硬着头皮去看使用方法，这是最基本的！！！
哈哈，看到这样一个页面，你肯定是一脸蒙蔽的！确实，如果光看这个API文档，是不可能学会使用 zTree，那么怎么办呢？请看接下去的介绍!
上面的API，如果你已经粗略的看过了，并且点击了其中的一些API查看了使用方法，很好，证明你有学会使用zTree的欲望已经渴望，这就够了！其实我写这么文章，并不是要教你zTree具体要这么使用，解压后的 zTree_v3 文件夹中已经提供了十分详细的教程，接下来我就是要把我学习的过程告诉你：
1. 访问： http://localhost/zTree_v3/demo/cn/, 你便可以看到重点，真正学习的地方原来在这里！噢耶！
2. 根据该教程，一步一步的往下学即可，如果我这样说，你肯定想打我了，（要我有何用！）哈哈！当然光看该demo教程，也是无法真正学会 zTree 的
  1. 可以看到上图中我标注的重点，其实，每篇demo教程都提供了一个单独的html文件让你去模仿，上图中标注1 即是该demo教程的提供的模仿文件所在位置： zTree_v3/demo/cn/core , 宝藏就在那里，去寻找吧！
  2. 使用称手的编辑器打开该文件，推荐使用 vscode, 前端神器！不解释，谁用谁知道。。。，使用分屏功能，对照着实现一遍吧！如果有不理解的API，就去看上面的说的API文档，查看该 API的介绍以及使用方法，如果你对照着，实现了每个demo教程的最后结果，而且看了API的使用，然后理解了！那么恭喜你！你应该会很容易掌握 zTree (注意：该偷懒的地方还是复制粘贴就好！如果你每行代码都敲，太浪费时间了！)
  3. 我们使用 zTree 还不是想用它去请求数据，然后把数据渲染成目录树吗？哈哈！很遗憾的告诉你，如果你根据教程学到了ajax 异步请求数据的部分，是不是觉得的很神奇！因为该教程，并没有告诉你，怎么去请求自己服务器数据，并使用自己的数据，而是，弄个php文件，生成一些狗屁数据给你！然并卵！这就是我所遇到的神坑，在下面的填坑部分，我会介绍遇到类似问题是，我是怎么解决的！

如果，你很认真的去看demo教程，并打开提供的学习文件进行模仿，遇到不懂的API, 去查API文档。那么，我可以很负责的告诉你，你现在已经绝对入门了！接下来，我将介绍重头戏，我在工作遇到的实际问题，并怎么填神坑的！

二、填坑指南

工作中的需求：根据后端提供的 api 如： http://localhost/zTree/test.php?file_path=/other7/img/girl1 需要根据file_path参数的路径进行文件树的渲染

问题1： zTree 根本不能获取到，当前你点击的节点是哪个？那么你要怎么根据路径去服务器请求数据呢？根本无从下手，如果你也遇到了需要通过zTree 获取当前点击的节点，那么，你应该明白我的痛苦，翻遍API文档，也找不到解决的方案！，怎么办呢？
1. 思路：查看 zTree 生成的 html 代码，可以看到，每个点击按钮都有一个className: .button, 我的思路，就是获取到，所有的 $('.button') 设置点击事件，获取到该元素的父节点的id属性， zTree 提供了根据 tid 获取当前节点的方法 treeObj.getNodeByTId(tid) (具体参照API文档)，怎么我们就通过自己的努力获取到了当前被点击的节点
2. 获取当前被点击的节点，也是需要的时机，否则是获取不到的，那么正确的时机在那里呢？当然是zTree异步获取数据，并渲染到dom以后的事情, 来看看，我是怎么写的：
```
var tid = '';
var filePathDom = $('#file_path')
// zTree配置
var setting = {
    async: {
        enable: true,
        type: 'GET',
        url: getUrl,
        dataFilter: filter
    },
    callback: {
        onAsyncSuccess: function () { //在数据请求成功后获取zTree渲染出来的节点
            $('.button').click(function () {
                tid = $(this).parent().attr('id')
            })
        }
    }
};
```
看到了吗？我在 setting 配置中的回调处理部分，去获取DOM节点的，这很重要，不然，你是不能获取到渲染出来的DOM节点的，我也是研究了一番之后，对API的使用和配置才了然于胸！
1. 根据上面的技巧，获取到了tid, 那么很容易得到当前被点击的节点了；zTree 提供了获取渲染出来的使用节点数据的直接方法，直接使用即可：
```
var treeObj = $.fn.zTree.getZTreeObj("tree");
//当前节点
var node = treeObj.getNodeByTId(tid) 
```
```
var treeObj = $.fn.zTree.getZTreeObj("tree");
//所有数据节点
var nodes = treeObj.getNodes()
```
1. 很好，我们已经有了当前节点 ``和所有节点，我们就可以根据层级关系，得到请求的路径了：
```
// ajax请求地址
function getUrl() {
   var treeObj = $.fn.zTree.getZTreeObj("tree");
   var nodes = treeObj.getNodes()
   var node = {}
   if (tid && nodes.length > 0) {
       node = treeObj.getNodeByTId(tid);
       var file_path = getFilePath(node, nodes)
       return baseUrl + 'file_path=' + file_path
   }
   return baseUrl + 'file_path=/'
}

// 地址中path部分获取
function getFilePath(node, nodes) {
   var parent = node.getParentNode()
   var path = []
   while (parent) {
       path.unshift(parent.name)
       parent = parent.getParentNode()
   }
   if (path.length > 0) {
       path = path.join('/')
       path = '/' + path + '/' + node.name
   } else {
       path = '/' + node.name
   }
   return path
}
```
问题2 点击当前节点文本，返回该节点路径，根据什么获取路径的过程，这个问题就显得比较简单了，主要是要注意时机问题：还是要写在setting.callback 回调部分，看我是怎么写的：
如果看不懂，可以去看一下API 文档，会有很大帮助的

var setting = {
    async: {
        enable: true,
        type: 'GET',
        url: getUrl,
        dataFilter: filter
    },
    callback: {
        onAsyncSuccess: function () {
            $('.button').click(function () {
                tid = $(this).parent().attr('id')
            })
        },
        onClick: function (event, treeId, treeNode) {
            var treeObj = $.fn.zTree.getZTreeObj("tree");
            var nodes = treeObj.getNodes()
            var path = getFilePath(treeNode, nodes)
            filePathDom.val(path)
        }
    }
};

zWorker9902 1楼•7 年前

zTree用过，是真的挺不错的

zTree入坑指南

目录

学习技巧

一、 简要介绍：

二、 学习方法

二、 填坑指南

一、简要介绍：

二、学习方法

二、填坑指南