js递归,无限分级树形折叠菜单

HitenDev 发布于2019-08-23 12:47 / 1719人阅读

摘要：效果图表结构形式数据数据第一级是第二级是广东第二级是广西第三级是玉林第三级是北流广东广州天河白云广西玉林北流深圳东莞松山湖部分获取省一级递归结构形式数据数据广东广州天河白云深圳东莞松山湖广西玉林北流部分获取省一级递归两者区别数据表形式数据递

效果图

mysql表结构形式数据 data数据

第一级是id:0

第二级是id:1,name:"广东",pid:0

第二级是id:5,name:"广西",pid:0

第三级是id:6,name:"玉林",pid:5

第三级是id:7,name:"北流",pid:6

            var data = [
                { id: 1, name: "广东", pid: 0 },
                { id: 2, name: "广州", pid: 1 },
                { id: 3, name: "天河", pid: 2 },
                { id: 4, name: "白云", pid: 2 },
                { id: 5, name: "广西", pid: 0 },
                { id: 6, name: "玉林", pid: 5 },
                { id: 7, name: "北流", pid: 6 },
                { id: 8, name: "深圳", pid: 1 },
                { id: 9, name: "东莞", pid: 1 },
                { id: 10, name: "松山湖", pid: 9 },
            ]

js部分

            var menu = "";
            menuFn(0, data)
            $("body").append(menu)

            function menuFn(id, data) {
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) { //获取省一级
                        if (data[i].pid == id) {
                            // console.log(data[i])
                            menu += ""
                                menu += "" + data[i].name
                                // menu += "
"+"id::" + data[i].id + ",name:"+ data[i].name + ",pid:"+ data[i].pid
                                menuFn(data[i].id, data)   //递归
                                menu += ""
                            menu += ""
                        }
                    }
                    return menu;
                }
            }

json结构形式数据 data数据

            var data = [
                {
                    id: 1, name: "广东", pid: 0,
                    children: [
                        {
                            id: 2, name: "广州", pid: 1,
                            children: [
                                { id: 3, name: "天河", pid: 2 },
                                { id: 4, name: "白云", pid: 2 },
                            ],
                        },
                        { id: 8, name: "深圳", pid: 1 },
                        {
                            id: 9, name: "东莞", pid: 1,
                            children: [
                                { id: 10, name: "松山湖", pid: 9 },
                            ]
                        },
                    ]
                },
                {
                    id: 5, name: "广西", pid: 0,
                    children: [
                        {
                            id: 6, name: "玉林", pid: 5,
                            children: [
                                { id: 7, name: "北流", pid: 6 },
                            ]
                        },
                    ]
                },
            ];

js部分

            var menu = "";
            menuFn(0, data)
            $("body").append(menu)

            function menuFn(id, data) {
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) { //获取省一级
                        if (data[i].pid == id) {
                            // console.log(data[i])
                            menu += ""
                            menu += "" + data[i].name
                            // menu += "
"+"id::" + data[i].id + ",name:"+ data[i].name + ",pid:"+ data[i].pid
                            if (data[i].children) {
                                menuFn(data[i].id, data[i].children)   //递归
                            }

                            menu += ""
                            menu += ""
                        }
                    }
                    return menu;
                }
            }

两者区别

数据表形式数据

menuFn(data[i].id, data)   //递归

json形式数据

if (data[i].children) {
    menuFn(data[i].id, data[i].children)   //递归
}

多级折叠菜单 效果图

说明 this指向

function fn() {
   // console.log(this)  //span   em
}
$("#app").delegate("span", "click", fn)
$("#app").delegate("em", "click", fn)

两者区别

$(this).parent().children("ul")[0]
$($(this).parent().children("ul")[0])

代码





    
    
    
    Document

服务器托管混合云 asp无限级树形菜单 js 树形菜单数据 js树形菜单数据结构 js树形菜单动态绑数据代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99006.html

实现一个可无限折叠的table

摘要：但实际上就是在上点击时对其子集进行隐藏或显示通过缩进的距离来表现层级关系在代码里很东西其实都是伪装出来的，例如我们要实现的这个可无限折叠的。前言如何在table上实现一个可折叠展开子节点的table？先看下最终实现效果图： showImg(https://segmentfault.com/img/remote/1460000017033990?w=758&h=453); 其实这个项...

crossea 2019-08-26 12:23 评论0 收藏0
java实现构造无限层级树形菜单

摘要：继续填上篇文章的坑，这里来讲一下后台如何构造多叉树，这样前台就可接收到数据递归构造树形菜单了。继续填上篇文章的坑，这里来讲一下后台java如何构造多叉树，这样前台就可接收到数据递归构造树形菜单了。我们来理一下如何实现构造多叉树的逻辑吧，其实整个问题概括起来就是1、构造一个实体类，用来存储节点，所以我们构造的需要四个对象（id，pid，name，和chirenList）2、构造菜单结...

seasonley 2019-08-15 11:59 评论0 收藏0
JavaScript实现无限级递归树

摘要：需求最近遇到一个需求，平时被后台惯着直接返回了树形结构给到前端，前端对这种嵌套类型的数据如地区的级联或菜单的树形结构省掉了一层处理。当然，没用好就相当于一堆废铁，甚至将导致一些不可预料的结果。相比起递归，我更喜欢这种方法。需求最近遇到一个需求，平时被后台惯着直接返回了树形结构给到前端，前端对这种嵌套类型的数据（如地区的级联或菜单的树形结构）省掉了一层处理。换了个后台小哥哥返回了扁平...

atinosun 2019-08-23 16:30 评论0 收藏0
sql反模式(二) — 单纯的树

摘要：其他的树形结构数据像职员与经理的关系，菜单等等很多方案以下所有方案中暂不考虑外键约束，数据库是邻接表这个可能是最常见的解决方案，直接添加字段，引用同一张表中的其他回复。个人博客：http://www.80soho.com/?p=781 场景：有这么个需求：设计开发一个评论系统，要求用户可以评论文章以及相互回复，无层级数限制。这个需求开发人员基本都遇到过，可以先回忆或考虑这个数据...

cnTomato 2019-07-01 12:38 评论0 收藏0
sql反模式(二) — 单纯的树

摘要：其他的树形结构数据像职员与经理的关系，菜单等等很多方案以下所有方案中暂不考虑外键约束，数据库是邻接表这个可能是最常见的解决方案，直接添加字段，引用同一张表中的其他回复。个人博客：http://www.80soho.com/?p=781 场景：有这么个需求：设计开发一个评论系统，要求用户可以评论文章以及相互回复，无层级数限制。这个需求开发人员基本都遇到过，可以先回忆或考虑这个数据...

zhichangterry 2019-08-01 13:50 评论0 收藏0