PS：让前端递归树的后端统一打死

 

言归正传，当我们不知道树有多少级别的时候怎么循环这个数？

直接上栗子。。

先来个效果图：

 

 

1、来组假数据：

　　

var data = [{
                        id: 1,
                        name: "一级树1",
                        pid: 0
                    },
                    {
                        id: 2,
                        name: "二级树1",
                        pid: 1
                    },
                    {
                        id: 3,
                        name: "二级树2",
                        pid: 1
                    },
                    {
                        id: 4,
                        name: "三级树1",
                        pid: 2
                    },
                    {
                        id: 5,
                        name: "一级树2",
                        pid: 0
                    },
                    {
                        id: 6,
                        name: "二级树3",
                        pid: 5
                    },
                    {
                        id: 7,
                        name: "三级树2",
                        pid: 6
                    },
                    {
                        id: 8,
                        name: "三级树3",
                        pid: 6
                    },
                    {
                        id: 9,
                        name: "四级树1",
                        pid: 8
                    },
                ];

2、递归——自调用。遍历数组，判断是否有子集，生成dom

　　　　　　　var menus = '';
            function GetData(id, arry) {
                var newArr= [];
                for (var i = 0; i < arry.length; i++) {
                    if (arry[i].pid == id) {
                        newArr.push(arry[i]);
                    }
                }
                if (newArr.length > 0) {
                    menus += '<ul>';
                    for (var i in newArr) {
                        menus += '<li>' + newArr[i].name;
                        GetData(newArr[i].id, arry);
                        menus += '</li>';
                    }
                    menus += '</ul>';
                }
            }

3、调用，结束

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

 

版权声明：本文为xqfffffff原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xqfffffff/p/12966223.html