写在前面

前些日子，领导要求做一个关于数据库管理的工具，主要想支持一些批量的操作，客户需求主要源自于之前人为操作不当误删数据，影响生产业务，对企业影响很大，因此就想着用程序来控制执行，当然核心实现能力还是在于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();