首页手记 zTree入坑指南

zTree入坑指南

标签：

JQuery JavaScript 前端工具

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)
    }
}
};

点击查看更多内容