js tree库 展现多列

<div id="tree-container">
    <!-- 树节点将动态生成并插入到这里 -->
</div>

// 假设我们有以下数据结构
const treeData = [
    {
        name: "节点1",
        age: 25,
        children: [
            { name: "子节点1-1", age: 5 },
            { name: "子节点1-2", age: 15 }
        ]
    },
    {
        name: "节点2",
        age: 30,
        children: [
            { name: "子节点2-1", age: 10 },
            { name: "子节点2-2", age: 20 }
        ]
    }
];

// 递归函数来生成树形HTML
function generateTree(data, container) {
    const ul = document.createElement('ul');
    data.forEach(item => {
        const li = document.createElement('li');
        // 创建一个表格来展示多列数据
        const table = document.createElement('table');
        const tbody = document.createElement('tbody');
        const row = document.createElement('tr');

        const nameCell = document.createElement('td');
        nameCell.textContent = item.name;
        const ageCell = document.createElement('td');
        ageCell.textContent = item.age;

        row.appendChild(nameCell);
        row.appendChild(ageCell);
        tbody.appendChild(row);
        table.appendChild(tbody);
        li.appendChild(table);

        if (item.children && item.children.length > 0) {
            generateTree(item.children, li); // 递归生成子树
        }

        ul.appendChild(li);
    });
    container.appendChild(ul);
}

// 初始化树形结构
const treeContainer = document.getElementById('tree-container');
generateTree(treeData, treeContainer);

#tree-container ul {
    list-style-type: none; /* 去掉默认的列表样式 */
    padding-left: 20px; /* 添加一些缩进以模拟树形结构 */
}

#tree-container table {
    width: 100%;
    border-collapse: collapse;
}

#tree-container td {
    border: 1px solid #ddd;
    padding: 8px;
}