Article directory
written in front
A few days ago, the leader asked to make a tool for database management. The main purpose was to support some batch operations. The customer's demand mainly came from the previous improper operation and mistaken deletion of data, which affected the production business and had a great impact on the enterprise, so I wanted to use it. Programs are used to control the execution. Of course, the core implementation capability lies in Python scripts. The main front-end is to show how intuitive it is. I just thought of the ztree component. Based on existing components, the implementation is relatively fast, but the adjustability is poor. Today Let me explain to you the example application of ztree.
knowledge involved
The example application of Ztree, based on jquery to realize folder folding effect, how to realize folder hierarchy function, ztree realizes folder effect, flexible application of ztree, ztree folder folding effect with retrieval function.
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
Show results
This is mainly to give you a feedback on the final implementation effect, and the sharing link of the complete code package is attached at the end of the article.
1. Build dom
In fact, the main implementation here still relies on components, so it is very simple to build dom. It mainly provides a ul container, as follows:
<div class="row" style="margin: 50px;">
<ul id="tree" class="ztree"></ul>
<div class="sm">原创于CSDN博主 - <br>《拄杖盲学轻声码》</div>
</div>
The core is to set the id to tree.
2. Introduce ztree and jquery
Dependent style components:
- css/zTreeStyle/zTreeStyle.css
dependent js components - 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
The main ones are the style components of ztree and the functional components of jquery and ztree. Of course, there is a complete source package download at the end of the article.
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。
3. Realize the search function and call
In fact, here I mainly encapsulate a MtrSearchZTree.js functional component, which is used to search the hierarchy. It is worth noting that the fake data (data returned by the interface) needs to have a parent-child structure distinction. If not, you need to convert it yourself. I didn't have it in my actual project, and then I traversed it and put it together.
The method of calling ztree is mainly as follows:
// 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();
The search function needs to introduce the components I encapsulated, and the complete package is downloaded at the end of the article
- MtrSearchZTree.js
4. Source code sharing
1) Baidu Netdisk
Link: https://pan.baidu.com/s/1Wd2bdBmWFmsCMlqgUoG7BA
Extraction code: hdd6
2) 123 cloud disk
Link: https://www.123pan.com/s/ZxkUVv-wxI4.html
Extraction code: hdd6
3) Email message
Leave your email account in the comment area, and the blogger will send it to you as soon as he sees it. I wish you a happy life!
Summarize
The above is what I want to talk about today. This article mainly introduces the example application of Ztree, realizes folder folding effect based on jquery, how to realize folder hierarchy function, ztree realizes folder effect, flexible application of ztree, ztree folder with retrieval function Folding effect, I also look forward to everyone's progress together, let's work together in 2023! ! !
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。