遍历json数组实现树

最新推荐文章于 2021-10-31 09:55:34 发布

weixin_30808575

最新推荐文章于 2021-10-31 09:55:34 发布

阅读量143

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/yingzi1028/p/8525635.html

版权

今天小颖在工作中遇到要遍历树得问题了，实现后，怕后期遇到又忘记啦，所以记录下嘻嘻，其实这个和小颖之前写过得一篇文章 json的那些事中第4点有关json的面试题有些类似。

数组格式：

    var arry = [{
            "id": "11",
            "name": "huanhuan",
            "pid": "0",
            "isleaf": 2,
            "child": [{
                    "name": "豆豆",
                    "pid": "22",
                    "id": "222",
                    "isleaf": 1
                },
                {
                    "name": "huanhuanhuan",
                    "pid": "2323",
                    "id": "2324",
                    "isleaf": 1
                }
            ]
        },
        {
            "id": "1212",
            "name": "大大",
            "pid": "0",
            "isleaf": 2,
            "child": [{
                "name": "1234",
                "pid": "1313",
                "id": "4444",
                "isleaf": 1
            }]
        },
        {
            "id": "666",
            "name": "光头强爱上熊二",
            "pid": "0",
            "isleaf": 1,
            "child": null
        },
        {
            "id": "888",
            "name": "服务范围2",
            "pid": "0",
            "isleaf": 2,
            "child": [{
                "name": "范围",
                "pid": "999",
                "id": "111111",
                "isleaf": 1
            }]
        },
        {
            "id": "121324",
            "name": "抚慰抚慰",
            "pid": "0",
            "isleaf": 1,
            "child": null
        },
        {
            "id": "1",
            "name": "12345",
            "pid": "0",
            "isleaf": 2,
            "child": [{
                "name": "大道东侧1",
                "pid": "1",
                "id": "3",
                "isleaf": 1
            }]
        },
        {
            "id": "2",
            "name": "顶顶顶顶",
            "pid": "0",
            "isleaf": 2,
            "child": [{
                "name": "顶顶顶顶顶",
                "pid": "2",
                "id": "4",
                "isleaf": 2,
                "child": [{
                    "name": "顶顶顶顶顶顶-1",
                    "pid": "4",
                    "id": "5",
                    "isleaf": 1
                }]
            }]
        }
    ]

最终渲染结果：

具体实现：

<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>

<body>
    <div class="dd"></div>
</body>
    <script type="text/javascript">
    var arry = [{
            "id": "11",
            "name": "huanhuan",
            "pid": "0",
            "isleaf": 2,
            "child": [{
                    "name": "豆豆",
                    "pid": "22",
                    "id": "222",
                    "isleaf": 1
                },
                {
                    "name": "huanhuanhuan",
                    "pid": "2323",
                    "id": "2324",
                    "isleaf": 1
                }
            ]
        },
        {
            "id": "1212",
            "name": "大大",
            "pid": "0",
            "isleaf": 2,
            "child": [{
                "name": "1234",
                "pid": "1313",
                "id": "4444",
                "isleaf": 1
            }]
        },
        {
            "id": "666",
            "name": "光头强爱上熊二",
            "pid": "0",
            "isleaf": 1,
            "child": null
        },
        {
            "id": "888",
            "name": "服务范围2",
            "pid": "0",
            "isleaf": 2,
            "child": [{
                "name": "范围",
                "pid": "999",
                "id": "111111",
                "isleaf": 1
            }]
        },
        {
            "id": "121324",
            "name": "抚慰抚慰",
            "pid": "0",
            "isleaf": 1,
            "child": null
        },
        {
            "id": "1",
            "name": "12345",
            "pid": "0",
            "isleaf": 2,
            "child": [{
                "name": "大道东侧1",
                "pid": "1",
                "id": "3",
                "isleaf": 1
            }]
        },
        {
            "id": "2",
            "name": "顶顶顶顶",
            "pid": "0",
            "isleaf": 2,
            "child": [{
                "name": "顶顶顶顶顶",
                "pid": "2",
                "id": "4",
                "isleaf": 2,
                "child": [{
                    "name": "顶顶顶顶顶顶-1",
                    "pid": "4",
                    "id": "5",
                    "isleaf": 1
                }]
            }]
        }
    ]
    var html = "";

    function orgTreeFun(data) {
        html += "<ul>";
        if (data.length > 0) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].child) {
                    html += "<li id=" + data[i].id + ">" + data[i].name;
                    orgTreeFun(data[i].child);
                    html += "</li>";
                } else {
                    html += "<li id=" + data[i].id + ">" + data[i].name + "</li>";
                }
            }
            html += '</ul>';
        }
    }
    orgTreeFun(arry);
    document.getElementsByClassName('dd')[0].innerHTML=html;
    </script>
</html>

数据格式:

var menuArry = [
            { id: 1, name: "办公管理", pid: 0 },
            { id: 2, name: "请假申请", pid: 1 },
            { id: 3, name: "出差申请", pid: 1 },
            { id: 4, name: "请假记录", pid: 2 },
            { id: 5, name: "系统设置", pid: 0 },
            { id: 6, name: "权限管理", pid: 5 },
            { id: 7, name: "用户角色", pid: 6 },
            { id: 8, name: "菜单设置", pid: 6 },
        ];

渲染结果：

具体实现：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
</head>

<body>
    <script type="text/javascript">
    $(function() {
        var menuArry = [
            { id: 1, name: "办公管理", pid: 0 },
            { id: 2, name: "请假申请", pid: 1 },
            { id: 3, name: "出差申请", pid: 1 },
            { id: 4, name: "请假记录", pid: 2 },
            { id: 5, name: "系统设置", pid: 0 },
            { id: 6, name: "权限管理", pid: 5 },
            { id: 7, name: "用户角色", pid: 6 },
            { id: 8, name: "菜单设置", pid: 6 },
        ];

        GetData(0, menuArry)
        $("body").append(menus);
    });

    //菜单列表html
    var menus = '';

    //根据菜单主键id生成菜单列表html
    //id：菜单主键id
    //arry：菜单数组信息
    function GetData(id, arry) {
        var childArry = GetParentArry(id, arry);
        console.log(childArry);
        if (childArry.length > 0) {
            menus += '<ul>';
            for (var i in childArry) {
                menus += '<li>' + childArry[i].name;
                GetData(childArry[i].id, arry);
                menus += '</li>';
            }
            menus += '</ul>';
        }
    }

    //根据菜单主键id获取下级菜单
    //id：菜单主键id
    //arry：菜单数组信息
    function GetParentArry(id, arry) {
        var newArry = new Array();
        for (var i in arry) {
            if (arry[i].pid == id)
                newArry.push(arry[i]);
        }
        return newArry;
    }
    </script>
</body>

</html>