使用 JavaScript 创建动态树视图

在 Web 开发中，动态树形视图是一种非常常见的控件，用于展示维度关系或者分类结构。在本文中，我们将介绍如何使用 JavaScript 创建动态树形视图。

基本概念

动态树形视图由节点和连接线组成。每个节点都有一个唯一的标识符和一个名称。连接线用于连接节点，形成树形结构。树形结构有一个根节点和多个子节点。

数据结构

在 JavaScript 中，可以使用对象表示节点。例如：

const node = {
  id: '1',
  name: 'Node 1',
  children: [
    {
      id: '2',
      name: 'Node 2',
      children: [],
    },
    {
      id: '3',
      name: 'Node 3',
      children: [
        {
          id: '4',
          name: 'Node 4',
          children: [],
        },
      ],
    },
  ],
};

该对象表示一个根节点和两个子节点的树形结构。

渲染 HTML

使用 JavaScript 生成树形结构的 HTML 代码。例如：

function renderNode(node) {
  let html = '<li>' + node.name;

  if (node.children.length > 0) {
    html += '<ul>';

    node.children.forEach(function (child) {
      html += renderNode(child);
    });

    html += '</ul>';
  }

  html += '</li>';

  return html;
}

const nodeHtml = renderNode(node);

该代码将树形结构渲染为 HTML 代码，并返回该代码。

动态展开

可以通过 JavaScript 代码为节点添加事件监听器，实现动态展开。例如：

function addToggleListener(nodeEl) {
  const toggleEl = nodeEl.querySelector('.toggle');

  toggleEl.addEventListener('click', function (event) {
    event.stopPropagation();
    nodeEl.classList.toggle('expanded');
  });
}

function renderNode(node) {
  let html = '<li>';

  if (node.children.length > 0) {
    html += '<span class="toggle">+</span>';
  }

  html += node.name;

  if (node.children.length > 0) {
    html += '<ul>';

    node.children.forEach(function (child) {
      html += renderNode(child);
    });

    html += '</ul>';
  }

  html += '</li>';

  const nodeEl = document.createElement('ul');
  nodeEl.innerHTML = html;
  addToggleListener(nodeEl);

  return nodeEl;
}

在上面的代码中，我们添加了一个“展开”按钮，当用户点击该按钮时，节点的展开状态会改变。

结论

在本文中，我们介绍了如何使用 JavaScript 创建动态树形视图。首先，我们定义了树形结构的数据结构。然后，我们使用 JavaScript 代码生成 HTML 代码。最后，我们使用事件监听器实现了动态展开功能。