适用于 vue react Es6 jQuery 等等的组织架构图(组织结构图)

最新推荐文章于 2025-02-05 16:56:47 发布

开发那点事儿~

最新推荐文章于 2025-02-05 16:56:47 发布

阅读量617

点赞数 3

分类专栏：前端开发 css javascript 文章标签： vue.js react.js es6

本文链接：https://blog.csdn.net/m0_58293192/article/details/142901374

版权

前端开发同时被 3 个专栏收录

93 篇文章

订阅专栏

javascript

34 篇文章

订阅专栏

css

6 篇文章

订阅专栏

我这里找的是 OrgChart 插件;

地址: GitHub - dabeng/OrgChart: It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.

这里面能满足你对组织架构图的一切需求! ! !

例: 按需加载 / 拖拽 / 编辑 / 自定义 / 折叠 / 从左往右 / 从右往左 / 混合(水平+垂直) / 节点定位等;

我这里主要使用了 jQuery版本 的混合(水平+垂直)的案例:

主要讲解 jQuery中如何使用 OrgChart 插件:

1. 打开 GitHub地址后,点击 ES6 Version

2. 点击 ES6 Version 后才会出现 jQuery version

3. 下面会提示你只需要引入 dist 目录下

js => jquery.orgchart.js

css => jquery.orgchart.css

这两个文件就是 OrgChart 的核心文件! ! !

4. 下面只需要把这两个文件copy到你的项目中,在你的html中引入即可;

如果你具体不知道怎么引入的话,还有方法可以让你更加的清晰! ! !

进入到 jQuery版本模式后,点击 Demos based on nested ul (基于嵌套ul的演示)

选中一个你想要的进去

把对应的文件copy到你的项目中,但是js中的写法可能得需要你自己修改一下;

修改前:

// 修改前

(function($) {
  $(function() {
    var ds = {
      name: "Lao Lao",
      title: "general manager",
      children: [
        { name: "Bo Miao", title: "department manager" },
        {
          name: "Su Miao",
          title: "department manager",
          children: [
            {
              name: "Hei Hei",
              title: "senior engineer",
              children: [
                { name: "Pang Pang", title: "engineer" },
                {
                  name: "Xiang Xiang",
                  title: "UE engineer",
                  children: [
                    { name: "Dan Dan", title: "engineer" },
                    {
                      name: "Er Dan",
                      title: "engineer",
                      children: [
                        { name: "Xuan Xuan", title: "intern" },
                        { name: "Er Xuan", title: "intern" }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        },
        { name: "Hong Miao", title: "department manager" },
        {
          name: "Chun Miao",
          title: "department manager",
          children: [
            { name: "Bing Qin", title: "senior engineer"},
            { name: "Yue Yue", title: "senior engineer",
              children: [
                { name: "Er Yue", title: "engineer"},
                { name: "San Yue", title: "engineer" },
                { name: "Si Yue", title: "UE engineer" }
              ]
            }
          ]
        }
      ]
    };

    var oc = $("#chart-container").orgchart({
      data: ds,
      nodeContent: "title",
      verticalLevel: 3,
      visibleLevel: 4
    });
  });
})(jQuery);

修改后:

// 修改后

var ds = {
                name: "Lao Lao",
                title: "general manager",
                children: [
                        { name: "Bo Miao", title: "department manager" },
                        {
                                name: "Su Miao",
                                title: "department manager",
                                children: [
                                        {
                                                name: "Hei Hei",
                                                title: "senior engineer",
                                                children: [
                                                        { name: "Pang Pang", title: "engineer" },
                                                        {
                                                                name: "Xiang Xiang",
                                                                title: "UE engineer",
                                                                children: [
                                                                        { name: "Dan Dan", title: "engineer" },
                                                                        {
                                                                                name: "Er Dan",
                                                                                title: "engineer",
                                                                                children: [
                                                                                        { name: "Xuan Xuan", title: "intern" },
                                                                                        { name: "Er Xuan", title: "intern" }
                                                                                ]
                                                                        }
                                                                ]
                                                        }
                                                ]
                                        }
                                ]
                        },
                        { name: "Hong Miao", title: "department manager" },
                        {
                                name: "Chun Miao",
                                title: "department manager",
                                children: [
                                        { name: "Bing Qin", title: "senior engineer"},
                                        { name: "Yue Yue", title: "senior engineer",
                                                children: [
                                                        { name: "Er Yue", title: "engineer"},
                                                        { name: "San Yue", title: "engineer" },
                                                        { name: "Si Yue", title: "UE engineer" }
                                                ]
                                        }
                                ]
                        }
                ]
        };

        var oc = $("#chart-container").orgchart({
                data: ds,
                nodeContent: "title",
                verticalLevel: 3,
                visibleLevel: 4
        });

下面是完整代码:

<link rel="stylesheet" href="../src/views/custom/pages/szbb/homePlugin/css/jquery.orgchart.css"/>

<style>
    #chart-container {
        position: relative;
        font-family: Arial;
        height: 540px;
        border: 1px solid #aaa;
        border-radius: 5px;
        overflow: auto;
        text-align: center;
    }

    .orgchart {
        padding-bottom: 20px;
    }

    #github-link {
        display: inline-block;
        background-image: url("https://dabeng.github.io/OrgChart/img/logo.png");
        background-size: cover;
        width: 64px;
        height: 64px;
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>


<div id="chart-container"></div>


<script src="../src/views/custom/pages/szbb/homePlugin/js/jquery.orgchart.js"></script>

<script>
        var ds = {
                name: "Lao Lao",
                title: "general manager",
                children: [
                        { name: "Bo Miao", title: "department manager" },
                        {
                                name: "Su Miao",
                                title: "department manager",
                                children: [
                                        {
                                                name: "Hei Hei",
                                                title: "senior engineer",
                                                children: [
                                                        { name: "Pang Pang", title: "engineer" },
                                                        {
                                                                name: "Xiang Xiang",
                                                                title: "UE engineer",
                                                                children: [
                                                                        { name: "Dan Dan", title: "engineer" },
                                                                        {
                                                                                name: "Er Dan",
                                                                                title: "engineer",
                                                                                children: [
                                                                                        { name: "Xuan Xuan", title: "intern" },
                                                                                        { name: "Er Xuan", title: "intern" }
                                                                                ]
                                                                        }
                                                                ]
                                                        }
                                                ]
                                        }
                                ]
                        },
                        { name: "Hong Miao", title: "department manager" },
                        {
                                name: "Chun Miao",
                                title: "department manager",
                                children: [
                                        { name: "Bing Qin", title: "senior engineer"},
                                        { name: "Yue Yue", title: "senior engineer",
                                                children: [
                                                        { name: "Er Yue", title: "engineer"},
                                                        { name: "San Yue", title: "engineer" },
                                                        { name: "Si Yue", title: "UE engineer" }
                                                ]
                                        }
                                ]
                        }
                ]
        };

        var oc = $("#chart-container").orgchart({
                data: ds,
                nodeContent: "title",
                verticalLevel: 3,
                visibleLevel: 4
        });

</script>