文章目录
- 写在前面
- 涉及知识
- 效果展示
- 1、搭建dom
- 2、引入ztree和jquery
- 3、实现搜索功能及调用
- 4、源码分享
- 1)百度网盘
- 2)123云盘
- 3)邮箱留言
- 总结
写在前面
前些日子,领导要求做一个关于数据库管理的工具,主要想支持一些批量的操作,客户需求主要源自于之前人为操作不当误删数据,影响生产业务,对企业影响很大,因此就想着用程序来控制执行,当然核心实现能力还是在于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();
搜索功能需要引入我封装的组件,文尾有下载完整包
- MtrSearchZTree.js
4、源码分享
1)百度网盘
链接:https://pan.baidu.com/s/1Wd2bdBmWFmsCMlqgUoG7BA
提取码:hdd6
2)123云盘
链接:https://www.123pan.com/s/ZxkUVv-wxI4.html
提取码:hdd6
3)邮箱留言
评论区留下您的邮箱账号,博主看到第一时间发给您,祝您生活愉快!
总结
以上就是今天要讲的内容,本文主要介绍了Ztree的实例应用,基于jquery实现文件夹折叠效果,如何实现文件夹层级功能,ztree实现文件夹效果,ztree的灵活应用,带检索功能的ztree文件夹折叠效果,也期待大家一起进步哈,2023年一起加油!!!
版权声明:此文原创于CSDN博主-《拄杖盲学轻声码》,主页有很多分享的代码,期待您的访问。