当前位置：首页 > JavaScript

js实现树表

2026-03-15 14:18:26JavaScript

实现树形表格的JavaScript方法

使用JavaScript实现树形表格通常涉及DOM操作和数据结构的处理。以下是几种常见的方法：

递归渲染树结构

通过递归函数遍历树形数据并生成对应的HTML表格结构：

function renderTreeTable(data, parentElement) {
  const table = document.createElement('table');
  data.forEach(item => {
    const row = document.createElement('tr');
    const cell = document.createElement('td');
    cell.textContent = item.name;
    row.appendChild(cell);

    if (item.children && item.children.length) {
      const childCell = document.createElement('td');
      const childTable = renderTreeTable(item.children, childCell);
      row.appendChild(childCell);
    }
    table.appendChild(row);
  });
  parentElement.appendChild(table);
  return table;
}

使用现有库

推荐使用成熟的库如jsTree或jqTree简化实现：

js实现树表

// 使用jsTree示例
$('#treeContainer').jstree({
  'core': {
    'data': [
      { 
        "text": "Parent", 
        "children": [
          {"text": "Child 1"},
          {"text": "Child 2"}
        ]
      }
    ]
  }
});

动态加载节点

对于大数据量的树表，实现懒加载：

function loadNode(nodeId, callback) {
  fetch(`/api/nodes?id=${nodeId}`)
    .then(res => res.json())
    .then(data => callback(data));
}

$('#treeTable').on('expand_node', function(e, data) {
  loadNode(data.node.id, function(children) {
    $('#treeTable').jstree(true).add_nodes(data.node, children);
  });
});

自定义表格样式

结合CSS实现树形缩进效果：

js实现树表

.tree-table td {
  padding-left: calc(var(--level) * 20px);
}

function applyTreeLevels(element, level = 0) {
  element.querySelectorAll('tr').forEach(row => {
    row.style.setProperty('--level', level);
    if (row.classList.contains('has-children')) {
      applyTreeLevels(row.nextElementSibling, level + 1);
    }
  });
}

虚拟滚动优化

对大型树表实现性能优化：

const virtualTree = new VirtualScroll({
  itemCount: 1000,
  renderItem: (index) => {
    const node = getNodeAtIndex(index);
    return `<tr><td>${node.name}</td></tr>`;
  },
  container: document.getElementById('treeTable')
});

数据格式建议

树表通常需要特定格式的数据结构：

const treeData = [
  {
    id: 1,
    name: 'Root',
    children: [
      { id: 2, name: 'Child 1' },
      { id: 3, name: 'Child 2', children: [...] }
    ]
  }
];

交互功能实现

添加展开/折叠功能：

document.querySelectorAll('.tree-toggle').forEach(button => {
  button.addEventListener('click', function() {
    const row = this.closest('tr');
    const children = row.nextElementSibling;
    children.classList.toggle('collapsed');
    this.textContent = children.classList.contains('collapsed') ? '+' : '-';
  });
});