js实现菜单树渲染-CSDN博客

本文链接：https://blog.csdn.net/weixin_64560999/article/details/130984880

该文章展示了一个使用JavaScript将扁平结构的菜单数据转换为树状结构，并进一步渲染为HTML无序列表的过程。主要涉及递归函数和DOM操作，用于构建多级菜单。

摘要由CSDN通过智能技术生成

初始数据：

let menuList = [
        { parentId: -1, name: "添加管理员", id: 10, auth: "admin" },
        { parentId: 10, name: "管理员权限分配", id: 11, auth: "admin-auth" },
        { parentId: -1, name: "商品管理", id: 1, auth: "product" },
        { parentId: 1, name: "商品列表", id: 4, auth: "productList" },
        { parentId: 4, name: "商品分类", id: 5, auth: "category" },
        { parentId: 5, name: "添加分类", id: 8, auth: "addClassification" },
        { parentId: 4, name: "商品上架", id: 6, auth: "product" },
        { parentId: -1, name: "评论管理", id: 2, auth: "comments" },
        { parentId: -1, name: "个人中心", id: 3, auth: "profile" },
    ]

要实现的效果：

分析：

步骤：1.将原来扁平化的数组转为树；2.将菜单树渲染为ul、li无序列表

转为菜单树

//目标数据
let menuList = [
        { parentId: -1, name: "添加管理员", id: 10, auth: "admin" },
        { parentId: 10, name: "管理员权限分配", id: 11, auth: "admin-auth" },
        { parentId: -1, name: "商品管理", id: 1, auth: "product" },
        { parentId: 1, name: "商品列表", id: 4, auth: "productList" },
        { parentId: 4, name: "商品分类", id: 5, auth: "category" },
        { parentId: 5, name: "添加分类", id: 8, auth: "addClassification" },
        { parentId: 4, name: "商品上架", id: 6, auth: "product" },
        { parentId: -1, name: "评论管理", id: 2, auth: "comments" },
        { parentId: -1, name: "个人中心", id: 3, auth: "profile" },
    ]
//递归转化，没错根据parentId，寻找它的孩子
    function findChild(parentId, menuList) {
        let temp = []
        for (let i = 0; i < menuList.length; i++) {
            if (menuList[i].parentId == parentId) {
                menuList[i].children = findChild(menuList[i].id, menuList)
                temp.push(menuList[i])
            }
        }
        return temp
    }
//先为菜单每一项添加children
    menuList.forEach(item => {
        item.children = []
    })
    let res = findChild(-1, menuList)//将扁平菜单转为菜单树

渲染

 function formate(item) {
        if (item.children.length > 0) {//如果有孩子，要继续挖
            let ans = ``
            item.children.forEach(child => {
                ans += formate(child)
            })
            return `<li>${item.name}<ul>` + ans + `</ul></li>`
        } else {
            return `<li>${item.name}</li>`//没有孩子就之际返回
        }
    }
    let resHtml = `<ul>`
    res.forEach(item => {
        resHtml += formate(item)//将每个树枝遍历渲染
    })
    resHtml += `</ul>`
    let div = document.querySelector(".box")
    console.log(resHtml);
    div.innerHTML = resHtml

选然后可以得到：

<ul>

<li>添加管理员

<ul>

<li>管理员权限分配</li>

</ul>

</li>

<li>商品管理

<ul>

<li>商品列表<ul>

<li>商品分类<ul>

<li>添加分类</li>

</ul>

</li>

<li>商品上架</li>

</ul>

</li>

</ul>

</li>

<li>评论管理</li>

<li>个人中心</li>

</ul>

总代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    let menuList = [
        { parentId: -1, name: "添加管理员", id: 10, auth: "admin" },
        { parentId: 10, name: "管理员权限分配", id: 11, auth: "admin-auth" },
        { parentId: -1, name: "商品管理", id: 1, auth: "product" },
        { parentId: 1, name: "商品列表", id: 4, auth: "productList" },
        { parentId: 4, name: "商品分类", id: 5, auth: "category" },
        { parentId: 5, name: "添加分类", id: 8, auth: "addClassification" },
        { parentId: 4, name: "商品上架", id: 6, auth: "product" },
        { parentId: -1, name: "评论管理", id: 2, auth: "comments" },
        { parentId: -1, name: "个人中心", id: 3, auth: "profile" },
    ]
    function findChild(parentId, menuList) {
        let temp = []
        for (let i = 0; i < menuList.length; i++) {
            if (menuList[i].parentId == parentId) {
                menuList[i].children = findChild(menuList[i].id, menuList)
                temp.push(menuList[i])
            }
        }
        return temp
    }
    menuList.forEach(item => {
        item.children = []
    })
    let res = findChild(-1, menuList)//将扁平菜单转为菜单树

    function formate(item) {
        if (item.children.length > 0) {
            let ans = ``
            item.children.forEach(child => {
                ans += formate(child)
            })
            return `<li>${item.name}<ul>` + ans + `</ul></li>`
        } else {
            return `<li>${item.name}</li>`
        }
    }
    let resHtml = `<ul>`
    res.forEach(item => {
        resHtml += formate(item)//将
    })
    resHtml += `</ul>`
    let div = document.querySelector(".box")
    console.log(resHtml);
    div.innerHTML = resHtml
</script>

</html>