写在前面

前些日子，领导要求做一个关于数据库管理的工具，主要想支持一些批量的操作，客户需求主要源自于之前人为操作不当误删数据，影响生产业务，对企业影响很大，因此就想着用程序来控制执行，当然核心实现能力还是在于Python脚本，前端主要做的就是一个展示怎么直观，我这不就想到了ztree这个组件，基于现有的组件实现相对较快，但是可调性差，今天我就和大家讲解一下ztree的实例应用吧。

涉及知识

Ztree的实例应用，基于jquery实现文件夹折叠效果，如何实现文件夹层级功能，ztree实现文件夹效果，ztree的灵活应用，带检索功能的ztree文件夹折叠效果。
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

效果展示

这个主要为了给大家一个最终实现效果的反馈，文尾附完整代码包的分享链接。
在这里插入图片描述

1、搭建dom

其实这里主要实现还是依赖组件，所以dom搭建起来就特别简单了，主要提供一个ul容器，具体如下：

<div class="row" style="margin: 50px;">
        <ul id="tree" class="ztree"></ul>
        <div class="sm">原创于CSDN博主 - <br>《拄杖盲学轻声码》</div>
    </div>

核心在于设置id为tree。

2、引入ztree和jquery

依赖的样式组件：

css/zTreeStyle/zTreeStyle.css
依赖的js组件
js/jquery.min.js
js/jquery-migrate-1.2.1.js
js/jquery.ztree.all-3.5.min.js
js/jquery.ztree.exhide-3.5.min.js

其中主要是ztree的样式组件和jquery及ztree的功能组件，当然在文尾有完整源码包下载哈。
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

3、实现搜索功能及调用

其实在这边我主要是封装了一个MtrSearchZTree.js功能组件，用于搜索层级的，其中值得注意的就是假数据（接口返回数据）需要有父子结构的区分，如果没有的话需要你自己去转换，我实际项目中就是没有，然后自己遍历拼起来的。
调用ztree的方法主要如下：

// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {};
// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
var zNodes = [{
    name: "test0",
    open: true,
    children: [{
        name: "test0_1"
    }, {
        name: "test0_2"
    }, {
        name: "test0",
        open: true,
        children: [{
            name: "CSDN博主.doc"
        }, {
            name: "拄杖盲学轻声码.doc"
        }]
    }]
}, {
    name: "test1",
    open: true,
    children: [{
        name: "test1_1"
    }, {
        name: "test1_2"
    }, {
        name: "test1",
        open: true,
        children: [{
            name: "养成记.exe"
        }, {
            name: "演员的自我修养.html"
        }]
    }]
},
{
    name: "test2",
    open: true,
    children: [{
        name: "轻舟已过万重山.pdf"
    }, {
        name: "两岸猿声啼不住.ppt"
    }]
}
];
$.fn.zTree.init($("#tree"), setting, zNodes);
new MtrSearchZTree();