怎么用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);
}
