树形结构渲染

ゝ一世哀愁。 2022-12-25 14:55 228阅读 0赞

今天终于得空了，正好有朋友问我树形数据结构如何渲染，我在网上给他搜简单易懂的 发现好多意思不够简明  
我就写了一个递归小方法方便大家理解，之后自己需要什么就拿去改一改就好了 俗话说得好 前端就是粘粘黏黏。

我们的口号是 我们不生产代码 我们只是代码的搬运工 ！！！！

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>树形结构</title>
    </head>
    <body>
        <div id="dom"></div>
        <script>
            // 模仿一下假数据
            let arr=[
                { 
                    title:"一级0",
                    name:"mingzi",
                    child:[
                       { 
                        title:"二级",
                        name:"erji",
                        child:[
                            { 
                                title:"三级",
                                name:"sanji",
                            },
                            { 
                                title:"三级",
                                name:"sanji",
                            },
                            { 
                                title:"三级",
                                name:"sanji",
                            },
                        ]
                       },
                       { 
                        title:"二级",
                        name:"erji",
                       },
                       { 
                        title:"二级",
                        name:"erji",
                       },
                       { 
                        title:"二级",
                        name:"erji",
                       },
                       { 
                        title:"二级",
                        name:"erji",
                       },
                    ]
                },
                { 
                    title:"一级1",
                    name:"mingzi",
                },
                { 
                    title:"一级2",
                    name:"mingzi",
                },
                { 
                    title:"一级3",
                    name:"mingzi",
                },
                { 
                    title:"一级4",
                    name:"mingzi",
                },
            ];
            // 递归渲染方法
            function jiegou(arr){ 
                let html=""; //每次都创建一个空值
                arr.forEach(item => { 
                    if(item.child){  //有下级 需要调本函数再次处理 直到没有下级
                        html+= `<div style="margin-left:20px" >${ item.title} ${ jiegou(item.child)} </div>`
                    }else{ //没有下级 直接渲染结构
                        html+= `<div style="margin-left:20px" >${ item.title}</div>`
                    }
                });
                return html //处理完的结果输出
            };
            // 数据插入页面结构中
            let dom=document.getElementById("dom");
            dom.innerHTML = jiegou(arr)
        </script>
    </body>
    </html>