tree_maker是一款可以将json数组生成树状多级组织架构图的插件-BFW插件库

tree_maker是一款可以将json数组生成树状多级组织架构图的插件

tree_maker是一款可以将json数组生成树状多级组织架构图的插件。

使用方式：

第一步引入css和js文件

 <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tree_maker-min.css">
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tree_maker-min.js"></script>

第二步准备dom容器

<div id="my_tree"></div>

第三步编写js

//The structure of your tree
let tree = {
        key_1: {
            key_2: '',
            key_3: '',
            key_4: '',
            key_5: ''
        },
    };

//The parameters of your tree
let treeParams = {
    key_1: {trad: 'Card 1', styles: {'box-shadow': '0 0 15px 2px blue'}},
    key_2: {trad: 'Card 2', styles: {'color': 'red'}},
    key_3: {trad: 'Card 3'},
    key_4: {trad: 'Card 4'},
    key_5: {trad: 'Card 5'},
};

//The function which will build the tree
treeMaker(tree, {
    id: 'my_tree', card_click: function (element) {
        console.log(element);
    },
    treeParams: treeParams,
    'link_width': '4px',
    'link_color': '#ff5259',
});

解析：

trad:将在卡片中显示的文本，如果没有繁体，键将显示 styles:您要添加到特定卡片的样式，每个 CSS 规则都将起作用

treeMaker这个函数有 2 个参数：JSON 中的树和作为对象的参数。

tree_maker是一款可以将json数组生成树状多级组织架构图的插件

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tree_maker-min.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tree_maker-min.js"></script>
</head>

<body>
    <div id="my_tree"></div>
    <script type="text/javascript">
        //The structure of your tree
    let tree = {
            key_1: {
                key_2: '',
                key_3: '',
                key_4: '',
                key_5: ''
            },
        };
    
    //The parameters of your tree
    let treeParams = {
        key_1: {trad: 'Card 1', styles: {'box-shadow': '0 0 15px 2px blue'}},
        key_2: {trad: 'Card 2', styles: {'color': 'red'}},
        key_3: {trad: 'Card 3'},
        key_4: {trad: 'Card 4'},
        key_5: {trad: 'Card 5'},
    };
    
    //The function which will build the tree
    treeMaker(tree, {
        id: 'my_tree', card_click: function (element) {
            console.log(element);
        },
        treeParams: treeParams,
        'link_width': '4px',
        'link_color': '#ff5259',
    });
    </script>



</body>

</html>

github地址：https://github.com/roumilb/treeMaker