树形结构渲染

最新推荐文章于 2023-06-09 11:12:01 发布

前端小吕

最新推荐文章于 2023-06-09 11:12:01 发布

阅读量4.5k

点赞数 4

文章标签： js

本文链接：https://blog.csdn.net/weixin_49230250/article/details/110480305

版权

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

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

<!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>

前端小吕

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
4
评论
树形结构渲染

今天终于得空了，正好有朋友问我树形数据结构如何渲染，我在网上给他搜简单易懂的发现好多意思不够简明我就写了一个递归小方法方便大家理解，之后自己需要什么就拿去改一改就好了俗话说得好前端就是粘粘黏黏。我们的口号是我们不生产代码我们只是代码的搬运工！！！！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport
复制链接

扫一扫