资讯专栏INFORMATION COLUMN

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

HitenDev / 1806人阅读

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

效果图

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




    

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

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

相关文章

  • 实现一个可无限折叠的table

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

    crossea 评论0 收藏0
  • java实现构造无限层级树形菜单

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

    seasonley 评论0 收藏0
  • JavaScript实现无限递归

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

    atinosun 评论0 收藏0
  • sql反模式(二) — 单纯的树

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

    cnTomato 评论0 收藏0

发表评论

0条评论

HitenDev

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<