zTree入坑指南（jQuery文件树插件——中级）
发布于 3 个月前 作者 zhb333 476 次浏览 来自 分享

zTree入坑指南

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

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

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

目录

  • 学习技巧
  • 填坑指南

学习技巧

一、 简要介绍：

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

二、 学习方法

  1. 首先到 github 或 码云 下载最新源码， 下载包里面，有你学习zTree必须的所有资源，毫不夸张的讲，该下载包绝对足以让你学会zTree,我在学习的时候，在官网买作者的20元教程，然并卵！
    1. 解压该下载包：
      解压后的文件名为： zTree_v3 解压后的文件
    2. 使用该文件夹进行学习即可，不过，最最最关键的一点是，你必须要有一个本地web服务环境, 关于本地web服务环境的搭建十分简单，可以参照我之前写的文章 实现百度搜索功能教程 里面的第四章，那里有详细的介绍
    3. 有一点， 需要你明确的， 那就是，我个人只学习了zTree 核心代码部分（jquery.ztree.core.js），因为对于我而言已经够用了！
  2. 很好，如果你已经搭建好了本地服务环境，访问： http://localhost/zTree_v3/api/API_cn.html, 可以进入zTree 提供的API文档界面， 里面包含了 zTree 所有的使用方法；如果你，已经打开了此页面，你尝试点击一下里面的每一个 API 会有一个弹框， 这个弹框会介绍这个API的具体使用方法 ，要求你必须硬着头皮去看使用方法， 这是最基本的！！！
    哈哈， 看到这样一个页面，你肯定是一脸蒙蔽的！ 确实， 如果光看这个API文档，是不可能学会使用 zTree， 那么怎么办呢？ 请看接下去的介绍! zTree API文档
  3. 上面的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. 问题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. 问题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)
        }
    }
};
1 回复

zTree用过，是真的挺不错的

回到顶部