实现“js 公司组织架构图”的步骤

概述

在这篇文章中，我们将介绍如何使用 JavaScript 实现一个公司组织架构图。我们将使用 HTML、CSS 和 JavaScript 来创建一个交互式的组织架构图，以展示公司的不同部门、职位和人员关系。

1. 准备工作

在开始之前，我们需要创建一个基本的 HTML 页面，并引入必要的 CSS 和 JavaScript 文件。以下是一个简单的 HTML 模板：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>公司组织架构图</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="orgChart"></div>

  <script src="script.js"></script>
</body>
</html>

2. 创建组织架构图容器

首先，我们需要创建一个容器来放置我们的组织架构图。我们可以使用一个带有特定 ID 的 <div> 元素来实现这一点。将以下代码添加到 HTML 文件的 <body> 中：

<div id="orgChart"></div>

3. 绘制组织架构图

接下来，我们将使用 JavaScript 来动态创建和绘制组织架构图。我们可以使用一个数组来表示公司的不同部门、职位和人员关系。以下是一个示例数组，您可以根据自己的需求进行修改和扩展：

const orgData = [
  { id: 1, name: 'CEO', parentId: null },
  { id: 2, name: 'CTO', parentId: 1 },
  { id: 3, name: 'CFO', parentId: 1 },
  { id: 4, name: 'Manager', parentId: 2 },
  { id: 5, name: 'Engineer', parentId: 4 },
  { id: 6, name: 'Accountant', parentId: 3 }
];

4. 使用递归构建组织架构图

我们可以使用递归函数来构建组织架构图。递归函数将遍历组织数据，并在每个节点上创建相应的 HTML 元素。以下是递归函数的示例代码：

function buildOrgChart(data, parentId, container) {
  const children = data.filter(item => item.parentId === parentId);

  if (children.length === 0) {
    return;
  }

  const ul = document.createElement('ul');

  children.forEach(child => {
    const li = document.createElement('li');
    li.textContent = child.name;
    ul.appendChild(li);

    buildOrgChart(data, child.id, li);
  });

  container.appendChild(ul);
}

const orgChartContainer = document.getElementById('orgChart');
buildOrgChart(orgData, null, orgChartContainer);

5. 样式化组织架构图

最后，我们可以使用 CSS 来样式化组织架构图。以下是一个简单的 CSS 样式表示例，您可以根据自己的喜好进行修改和扩展：

ul {
  list-style: none;
  padding-left: 20px;
}

li {
  margin-bottom: 10px;
}

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>公司组织架构图</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="orgChart"></div>

  <script>
    const orgData = [
      { id: 1, name: 'CEO', parentId: null },
      { id: 2, name: 'CTO', parentId: 1 },
      { id: 3, name: 'CFO', parentId: 1 },
      { id: 4, name: 'Manager', parentId: 2 },
      { id: 5, name: 'Engineer', parentId: 4 },
      { id: 6, name: 'Accountant', parentId: 3 }
    ];

    function buildOrgChart(data, parentId, container) {
      const children = data.filter(item => item.parentId === parentId);

      if (children.length === 0) {
        return;
      }

      const ul = document.createElement('