zTree入坑指南(jQuery文件树插件——中级)
发布于 1 年前 作者 zhb333 1243 次浏览 来自 分享

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用过,是真的挺不错的

回到顶部