jquery递归tree

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

言归正传，怎么循环树？

直接上栗子。。

先来个效果图：

1、来组假数据：

扫描二维码关注公众号，回复： 11274105 查看本文章

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);

猜你喜欢