怎么用js实现树状表格

使用原生JavaScript实现树状表格

创建HTML结构，定义表格的基本框架，使用<table>标签，并为树状结构预留缩进空间。

<table id="treeTable">
  <thead>
    <tr>
      <th>名称</th>
      <th>值</th>
    </tr>
  </thead>
  <tbody id="treeBody"></tbody>
</table>

定义树形数据，使用嵌套数组或对象表示层级关系，每个节点包含名称、值和子节点。

const treeData = [
  {
    name: '节点1',
    value: '100',
    children: [
      {
        name: '子节点1',
        value: '50',
        children: []
      }
    ]
  }
];

递归渲染函数，遍历树形数据生成表格行，为子节点添加缩进样式。

function renderTree(data, parentElement, level = 0) {
  data.forEach(item => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td style="padding-left: ${level * 20}px">${item.name}</td>
      <td>${item.value}</td>
    `;
    parentElement.appendChild(row);

    if (item.children && item.children.length > 0) {
      renderTree(item.children, parentElement, level + 1);
    }
  });
}

document.addEventListener('DOMContentLoaded', () => {
  renderTree(treeData, document.getElementById('treeBody'));
});

使用第三方库实现树状表格

安装zTree库，通过npm或CDN引入资源文件。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.48/css/zTreeStyle/zTreeStyle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.48/js/jquery.ztree.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.48/js/jquery.ztree.exhide.min.js"></script>

配置zTree参数，设置回调函数和显示样式。

const setting = {
  view: {
    showLine: true,
    selectedMulti: false
  },
  data: {
    simpleData: {
      enable: true
    }
  },
  callback: {
    onClick: function(event, treeId, treeNode) {
      console.log(treeNode);
    }
  }
};

初始化树状结构，将数据绑定到DOM元素。

const zNodes = [
  {id:1, pId:0, name:"父节点", open:true},
  {id:11, pId:1, name:"子节点"}
];

$(document).ready(function(){
  $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

添加交互功能

实现展开/折叠功能，通过CSS类控制子节点显示状态。

function toggleChildren(row) {
  const children = row.parentNode.querySelectorAll('.child-of-' + row.dataset.id);
  children.forEach(child => {
    child.style.display = child.style.display === 'none' ? 'table-row' : 'none';
  });
}

添加事件监听器，点击节点时触发展开/折叠。

document.getElementById('treeBody').addEventListener('click', function(e) {
  if (e.target.classList.contains('toggle')) {
    toggleChildren(e.target.closest('tr'));
  }
});

性能优化建议

虚拟滚动技术，只渲染可视区域内的节点，减少DOM元素数量。

const container = document.getElementById('treeBody');
const visibleHeight = container.clientHeight;
let startIndex = 0;
let endIndex = Math.ceil(visibleHeight / rowHeight);

function renderVisibleItems() {
  const visibleData = treeData.slice(startIndex, endIndex);
  // 渲染逻辑
}

数据懒加载，当展开节点时再请求子节点数据。

function loadChildren(parentId, callback) {
  fetch(`/api/nodes?parentId=${parentId}`)
    .then(response => response.json())
    .then(callback);
}