当前位置:主页 > JavsScript库 > 表单 >

JavaScript中简单的vanilla树视图组件 - VanillaTreeView
栏目分类:表单   发布日期:2021-08-17   浏览次数:

一个简单的原生 JavaScript 树视图组件,可用于可视化任何分层数据,如文件和文件夹。

如何使用它:

1.使用NPM安装并导入VanillaTreeView组件。

# NPM
$ npm i simple-treeview --save
import { VanillaTreeView } from './dist/treeview.vanilla.js';
<link rel="stylesheet" href="./dist/treeview.vanilla.css" />

2. 还自带Bootstrap版本,兼容最新的Bootstrap 5框架。

import { BootstrapTreeView } from './dist/treeview.bootstrap.js';
<link rel="stylesheet" href="./dist/treeview.bootstrap.css" />

3. 创建一个空的 DIV 容器来承载树视图。

<div id="tree"></div>

4. 下面的代码展示了如何在树状视图中呈现数据。需要注意的是,该组件使用了Font Awesome图标(Bootstrap 版本的Bootstrap Icons),因此可以在s属性中使用诸如`fa-folder`或 之类的类。`fa-clock`{@link INode}'`icon`

let tree = new VanillaTreeView(document.getElementById('tree'), {
    provider: {
        async getChildren(id) {
            if (!id) {
                return [
                    { id: 'p1', label: '父节点 #1', icon: 'fa-folder', state: 'collapsed' },
                    { id: 'p2', label: '父节点 #2', icon: 'fa-folder', state: 'expanded' }
                ];
            } else {
                await new Promise((resolve, reject) => setTimeout(resolve, 1000));
                switch (id) {
                    case 'p1':
                        return [
                            { id: 'c1', label: '子节点 #1', icon: 'fa-file', state: 'collapsed' },
                            { id: 'c2', label: '子节点 #2', icon: 'fa-file' }
                        ];
                    case 'p2':
                        return [
                            { id: 'c3', label: '子节点 #3', icon: 'fa-file' },
                            { id: 'c4', label: '子节点 #4', icon: 'fa-file' }
                        ];
                    case 'c1':
                        return [
                            { id: 'g1', label: '子子节点 #1', icon: 'fa-clock' }
                        ];
                    default:
                        return [];
                }
            }
        }
    }
});


官方网站:https://github.com/petrbroz/simple-treeview

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库