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

最新推荐文章于 2022-11-14 08:51:23 发布

weixin_34075268

最新推荐文章于 2022-11-14 08:51:23 发布

阅读量1.4k

点赞数 1

文章标签： json javascript 数据库 ViewUI

原文链接：https://segmentfault.com/a/1190000016905452

版权

效果图

mysql表结构形式数据

data数据

第一级是id:0
1. 第二级是id:1,name:'广东',pid:0
2. 第二级是id:5,name:'广西',pid:0
  1. 第三级是id:6,name:'玉林',pid:5
    1. 第三级是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 += "<ul>"
                                menu += "<li>" + data[i].name
                                // menu += "<li>"+"id::" + data[i].id + ",name:"+ data[i].name + ",pid:"+ data[i].pid
                                menuFn(data[i].id, data)   //递归
                                menu += "</li>"
                            menu += "</ul>"
                        }
                    }
                    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 += "<ul>"
                            menu += "<li>" + data[i].name
                            // menu += "<li>"+"id::" + data[i].id + ",name:"+ data[i].name + ",pid:"+ data[i].pid
                            if (data[i].children) {
                                menuFn(data[i].id, data[i].children)   //递归
                            }

                            menu += "</li>"
                            menu += "</ul>"
                        }
                    }
                    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])

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    ul,
    li {
        list-style: none;
    }

    li {
        position: relative;
        line-height: 30px;
        padding-left: 20px
    }

    em {
        position: absolute;
        top: 7px;
        left: 0;
        width: 16px;
        height: 16px;
        background: url("jian.png") no-repeat;
        cursor: pointer;
        background-size: 16px 16px;
    }
    em.open{
        background: url("jia.png") no-repeat;
        background-size: 16px 16px;
    }
</style>

<body>
    <div id="app"></div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function () {
            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 },
                            ]
                        },
                    ]
                },
            ];

            var menu = '';
            menuFn(0, data)
            $("#app").append(menu)

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

                        }
                    }
                    menu += "</ul>"
                    return menu;
                }
            }

            function fn() {
                var ull = $($(this).parent().children("ul")[0]);
                if (ull.length > 0) {
                    ull.toggle();
                    $(this).toggleClass("open")
                }
            }
            $("#app").delegate("span", "click", fn)
            $("#app").delegate("em", "click", fn)
        })
    </script>
</body>

</html>

weixin_34075268

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js递归,无限分级树形折叠菜单

效果图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 = [ ...
复制链接

扫一扫