处理并渲染树形数据

details {
    font-size: 18px;
    margin: 4px 0px;
}

details > details {
    margin-left: 1em;
    line-height: 26px;
}

<div id="treeNode"></div>

<script>

    // 源数据
    let flatData = [
        { id: 1, name: 'Node 1', parent_id: 0 },
        { id: 2, name: 'Node 2', parent_id: 1 },
        { id: 4, name: 'Node 4', parent_id: 2 },
        { id: 5, name: 'Node 5', parent_id: 2 },
        { id: 3, name: 'Node 3', parent_id: 1 },
        { id: 6, name: 'Node 6', parent_id: 3 },
        { id: 7, name: 'Node 7', parent_id: 3 }
    ];

    // 遍历源数据
    function treeHandle (data) {
        let retData = [];

        flatData.forEach(item => {
            if (item.parent_id === 0) {
                item.children = [];
                retData.push(item)
            } else {
                deepTreeHandle(retData, item);
            }
        })

        return retData;
    }

    // 递归处理数据
    function deepTreeHandle (retData, item) {
        retData.forEach(tree => {
            if (tree.id === item.parent_id) {
                if (!tree.children) tree.children = [];                    
                tree.children.push(item);
            }
            if (tree.children && tree.children.length) {                    
                deepTreeHandle(tree.children, item);
            }
        })
    }

    // 渲染函数
    function renderTreeHandle (treeData, treeRootNode) {            
        
        treeData.forEach(treeItem => {
            let detailsParNode = document.createElement('details');
            let summaryNode = document.createElement('summary');
            summaryNode.innerHTML = treeItem.name;

            if (treeItem.children && treeItem.children.length) {
                renderTreeHandle(treeItem.children, detailsParNode);
            }

            detailsParNode.appendChild(summaryNode);                
            treeRootNode.appendChild(detailsParNode);
        });

    }

    // 将二维数组转换为树开数据
    let treeData = treeHandle(flatData);

    // 获取根目录容器
    let treeRootNode = document.getElementById('treeNode');

    // 渲染到页面
    renderTreeHandle(treeData, treeRootNode);

</script>