原生js动态生成树形菜单

最新推荐文章于 2024-06-24 11:17:20 发布
最新推荐文章于 2024-06-24 11:17:20 发布
阅读量1.4k 收藏 6
点赞数 1
分类专栏： js 文章标签： javascript css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49078296/article/details/121895123
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生js动态生成树形菜单 </title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
    <div id="menuTree" class="menuTree"></div>
</body>
<style>
    .menuTree div {
        padding-left: 20px;
    }

    .menuTree div ul {
        overflow: hidden;
        display: none;
        height: auto;
    }

    .menuTree span {
        display: block;
        height: 25px;
        line-height: 25px;
        padding-left: 5px;
        margin: 1px 0;
        cursor: pointer;
        border-bottom: 1px solid #CCC;
    }

    .menuTree span:hover {
        background-color: #e6e6e6;
        color: #cf0404;
    }

    .menuTree a {
        color: #333;
        text-decoration: none;
    }

    .menuTree a:hover {
        color: #06F;
    }

    .btn {
        height: 30px;
        margin-top: 10px;
        border-bottom: 1px solid #CCC;
    }
</style>
<script type="text/javascript">
    var json = [{
            "name": "1级菜单",
            "list": [{
                    "name": "2级菜单",
                    "url": "/url1"
                },
                {
                    "name": "2级菜单",
                    "list": [{
                            "name": "3级菜单",
                            "list": [{
                                "name": "4级菜单",
                                "url": "/url111"
                            }, {
                                "name": "4级菜单",
                                "list": [{
                                    "name": "5级菜单",
                                    "url": "/url1111"
                                }, {
                                    "name": "5级菜单",
                                    "url": "/url1112"
                                }]
                            }]
                        },
                        {
                            "name": "3级菜单",
                            "url": "/url13"
                        },
                        {
                            "name": "3级菜单",
                            "url": "/url14"
                        }
                    ]
                },
                {
                    "name": "2级菜单",
                    "url": "/url3"
                }
            ]
        },
        {
            "name": "1级菜单",
            "list": [{
                    "name": "2级菜单",
                    "url": "/url1"
                },
                {
                    "name": "2级菜单",
                    "list": [{
                            "name": "3级菜单",
                            "url": "/url111"
                        },
                        {
                            "name": "3级菜单",
                            "url": "/url112"
                        }
                    ]
                },
            ]
        },
        {
            "name": "1级菜单",
            "list": [{
                    "name": "2级菜单",
                    "url": "/url1"
                },
                {
                    "name": "2级菜单",
                    "url": "/url2"
                }
            ]
        },
        {
            "name": "1级菜单"
        }
    ]
    /*递归实现获取多级树数据并生成DOM结构*/
    var str = "";
    var forTree = function (o) {
        for (var i = 0; i < o.length; i++) {
            var urlstr = "";
            try {
                if (typeof o[i]["url"] == "undefined") {
                    urlstr = "<div><span>" + o[i]["name"] + "</span><ul>";
                } else {
                    urlstr = "<div><span><a href=" + o[i]["url"] + ">" + o[i]["name"] + "</a></span><ul>";
                }
                str += urlstr;
                if (o[i]["list"] != null) {
                    forTree(o[i]["list"]);
                }
                str += "</ul></div>";
            } catch (e) {}
        }
        return str;
    }
    /*添加多级树*/
    document.getElementById("menuTree").innerHTML = forTree(json);
    /*树形菜单*/
    var menuTree = function () {
        //所有父元素加[+-]
        $("#menuTree ul").each(function (index, element) {
            var ulContent = $(element).html();
            var spanContent = $(element).siblings("span").html();
            if (ulContent) {
                $(element).siblings("span").html("[+] " + spanContent)
            }
        });

        $("#menuTree").find("div span").click(function () {
            var ul = $(this).siblings("ul");
            var spanStr = $(this).html();
            var spanContent = spanStr.substr(3, spanStr.length);
            if (ul.find("div").html() != null) {
                if (ul.css("display") == "none") {
                    ul.show(300);
                    $(this).html("[-] " + spanContent);
                } else {
                    ul.hide(300);
                    $(this).html("[+] " + spanContent);
                }
            }
        })
    }()

    /*展开*/
    $("#btn_open").click(function () {
        $("#menuTree ul").show(300);
        curzt("-");
    })
    /*收缩*/
    $("#btn_close").click(function () {
        $("#menuTree ul").hide(300);
        curzt("+");
    })

    function curzt(v) {
        $("#menuTree span").each(function (index, element) {
            var ul = $(this).siblings("ul");
            var spanStr = $(this).html();
            var spanContent = spanStr.substr(3, spanStr.length);
            if (ul.find("div").html() != null) {
                $(this).html("[" + v + "] " + spanContent);
            }
        });
    }
</script>
</html>

效果图
在这里插入图片描述

徐_三岁
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS无限级树形菜单（兼容各浏览器）
01-10
原生JS写的无限级树形菜单(包含文件：otree.js,otree.css,demo.html,demo1.html,imgs/ )，兼容IE6/7/8/9+、Chrome、Firefox、Opera、Safari等主流浏览器，以及360/搜狗等其他各浏览器。 可动态添加/删除节点，启用/不启用复选框，启用连线或不连线，支持自定义ICON图标，可获取当前选中节点参数及父级目录树，可用作级联下拉树菜单等。 可获取HTML中li列表自动生成树菜单（可用作网站多级分类目录） 更多功能参见demo.html和demo1.html
javascript动态生成树形菜单的方法
01-21
本文实例讲述了javascript动态生成树形菜单的方法。分享给大家供大家参考，具体如下： //======================================== //Envrionment to hold Listeners //======================================== tv_listeners = new Array() ; function listener( type , handler ) { this.type = type ; this.handler = handler ; this.id = tv_listene
js实现树形结构
linshenshijianlu的博客
08-12 2248
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> js javascript 树形菜单 function dada(r){ var da=[]; for(var i=1;i<8;i++){ if(r<2) da
JavaScript生成树形菜单（递归算法）
weixin_30786617的博客
08-15 338
1、最终效果图（这里仅为实现算法，并加载至页面，不做任何css界面优化） 注释：本示例包含三级目录菜单，但实际上可支持N级（可使用该代码自行测试） 2、数据源 菜单信息一般来源于数据库中数据表，且为自连接表，其中包含主要字段（主键，菜单名称，父级id）； 本示例在前端页面中使用对象数组模拟从数据库获取菜单信息； var menuArry = [ { id: 1, na...
原生JS实现树形目录树，支持无限层级嵌套
最新发布
zthtt的博客
06-24 231
原生JS实现树形目录树，支持无限层级嵌套
原生js 前端处理省市区等层级数据为树状结构详解（递归）
m0_72348850的博客
04-01 455
原生js 前端处理省市区等层级数据为树状结构详解（递归）
html js 动态添加树形菜单,javascript动态生成树形菜单的方法
weixin_30345333的博客
06-04 561
本文实例讲述了javascript动态生成树形菜单的方法。分享给大家供大家参考，具体如下：//========================================//Envrionment to hold Listeners//========================================tv_listeners = new Array() ;function lis...
原生JS树菜菜单(无限级、兼容各浏览器)
01-09
原生JS写的无限级树形菜单(otree.js,otree.css,demo.html,demo1.html,imgs/ )，兼容IE6/7/8/9+、Chrome、Firefox、Opera、Safari等主流浏览器，以及360/搜狗等其他各浏览器。 可动态添加/删除节点，启用/不启用复选框，启用连线或不连线，支持自定义ICON图标，可获取当前选中节点参数及父级目录树，可用作级联下拉树菜单等。 可获取HTML中li列表自动生成树菜单（可用作网站多级分类目录） 更多功能参见demo.html和demo1.html
JavaScript递归算法生成树形菜单
10-19
JavaScript递归算法生成树形菜单是一种常见的编程技巧，主要用于处理具有层级关系的数据，例如网站的导航菜单、组织结构等。在本示例中，我们看到如何利用递归方法将一个对象数组转换为HTML的树形结构，从而在网页上...
利用原生JS自动生成文章标题树的实例
10-21
在本文中，我们将探讨如何利用原生JavaScript生成文章标题树，这是一种常见的用于组织和导航长篇文章的方法。通过创建这样的树形结构，用户可以快速浏览文章的层级结构，从而轻松找到感兴趣的部分。 首先，我们需要...
js动态树菜单(只供参考)
11-04
js树js树js树js树js树js树js树js树
原生js手写tree树形分类选择插件
05-06
原生js结合jquery手写树形插件，详解编码思路，具体可使用示例，下载即可使用
JS制作的树形菜单
09-03
基于js实现的树形结构,各种各样，类似于windows左边窗体的结构。
JavaScript动态树型菜单(带有参数说明)
02-19
一个国外网站下载下来的很不错的JavaScript动态树型菜单,为方便大家，本人对其中的部分参说做了小小说明^_^
纯js实现树形导航菜单
05-20
纯js效果实现导航菜单功能。可以直接把代码复制到页面上使用。
使用jsTree实现js树形结构
06-07
jsTree 是一个强大的 JavaScript 库，专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写，无需依赖其他库，因此对于初学者和有经验的开发者来说，都是一个易于理解和使用的工具。通过这个库，你...
js生成的树形菜单。。
05-26
在JavaScript（JS）中生成树形菜单是一种常见的前端开发任务，尤其在构建具有层次结构的数据展示时非常有用。树形菜单通常用于网站导航、文件管理器或者任何需要展示层级关系的场景。以下是对这个主题的详细说明： ...
利用JavaScript 动态生成 树形结构
weixin_33937913的博客
06-02 96
Webforma.aspx &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" &gt;&lt;HTML&gt; &lt;HEAD&gt;  &lt;title&gt;WebForm2&lt;/title&gt;  &lt;meta name="GENERATOR" Content="Micr
spring jpa生成树形菜单
07-28
在Spring JPA中生成树形菜单可以通过以下步骤进行实现： 1. 首先，需要在数据库中创建一个用于存储菜单信息的表，表结构至少需要包含id、菜单名、父菜单id等字段。可以使用`@Entity`注解来定义这个菜单实体类，并使用`@Table`注解来指定对应的数据库表。 2. 在实体类中，可以使用`@ManyToOne`注解定义菜单与父菜单的关联关系，表示该菜单对应的父菜单。这样就能够通过父菜单id查询到对应的父菜单信息。 3. 在菜单实体类中，可以添加一个名为`children`的字段，该字段用来存储该菜单的子菜单信息。使用`@OneToMany`注解定义菜单与子菜单的关联关系，并通过`mappedBy`属性指定关联关系的字段。 4. 创建一个自定义的Repository接口，继承`JpaRepository`接口，并自定义一个查询方法，用于根据父菜单id查询子菜单列表。在自定义方法上使用`@Query`注解，并编写JPQL查询语句，通过`@Query`注解中的`nativeQuery`属性指定是否使用原生的SQL查询。 5. 在Controller中，注入自定义的Repository接口，并通过调用自定义方法查询到根节点的菜单列表。 6. 通过递归的方式将查询到的根节点菜单信息组装成树形结构，可以使用一个递归方法来实现这个过程。该方法接收一个菜单列表作为参数，先遍历菜单列表，找到根节点菜单，然后递归调用该方法，将该根节点菜单的子菜单列表作为参数传入。 7. 在前端展示时，可以通过遍历树形结构，依次展示菜单的层级关系和子菜单。 通过以上步骤，就可以在Spring JPA中生成树形菜单了。注意，树形结构的生成主要是通过数据库的表结构和实体类的关联关系来实现的，而查询和组装树形结构的逻辑需要在后端进行处理，然后将生成的树形菜单传给前端进行展示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值