1、最终效果图（这里仅为实现算法，并加载至页面，不做任何css界面优化）

注释：本示例包含三级目录菜单，但实际上可支持N级（可使用该代码自行测试）

2、数据源

菜单信息一般来源于数据库中数据表，且为自连接表，其中包含主要字段（主键，菜单名称，父级id）；

本示例在前端页面中使用对象数组模拟从数据库获取菜单信息；

var menuArry = [

{ id: 1, name: "办公管理", pid: 0 },

{ id: 2, name: "请假申请", pid: 1 },

{ id: 3, name: "出差申请", pid: 1 },

{ id: 4, name: "请假记录", pid: 2 },

{ id: 5, name: "系统设置", pid: 0 },

{ id: 6, name: "权限管理", pid: 5 },

{ id: 7, name: "用户角色", pid: 6 },

{ id: 8, name: "菜单设置", pid: 6 },

];　　

注释：id——菜单主键id；name——菜单名称；pid——父级id

3、程序设计

菜单信息一般来源

//菜单列表html

        var menus = '';

        //根据菜单主键id生成菜单列表html

        //id：菜单主键id

        //arry：菜单数组信息

        function GetData(id, arry) {

            var childArry = GetParentArry(id, arry);

            if (childArry.length > 0) {

                menus += '<ul>';

                for (var i in childArry) {

                    menus += '<li>' + childArry[i].name;

                    GetData(childArry[i].id, arry);

                    menus += '</li>';

                }

                menus += '</ul>';

            }

        }

        //根据菜单主键id获取下级菜单

        //id：菜单主键id

        //arry：菜单数组信息

        function GetParentArry(id, arry) {

            var newArry = new Array();

            for (var i in arry) {

                if (arry[i].pid == id)

                    newArry.push(arry[i]);

            }

            return newArry;

        }

注释：本示例菜单使用ul无序列表演示，menus变量为最终生成的菜单html

4、运行

GetData(0, menuArry)

$("body").append(menus);

注释：GetData(0, menuArry)，0——顶级菜单主键

5、完整代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="jquery-1.8.3.min.js"></script>

</head>

<body>

    <script type="text/javascript">

        $(function () {

            var menuArry = [

            { id: 1, name: "办公管理", pid: 0 },

            { id: 2, name: "请假申请", pid: 1 },

            { id: 3, name: "出差申请", pid: 1 },

            { id: 4, name: "请假记录", pid: 2 },

            { id: 5, name: "系统设置", pid: 0 },

            { id: 6, name: "权限管理", pid: 5 },

            { id: 7, name: "用户角色", pid: 6 },

            { id: 8, name: "菜单设置", pid: 6 },

            ];

            GetData(0, menuArry)

            $("body").append(menus);

        });

        //菜单列表html

        var menus = '';

        //根据菜单主键id生成菜单列表html

        //id：菜单主键id

        //arry：菜单数组信息

        function GetData(id, arry) {

            var childArry = GetParentArry(id, arry);

            if (childArry.length > 0) {

                menus += '<ul>';

                for (var i in childArry) {

                    menus += '<li>' + childArry[i].name;

                    GetData(childArry[i].id, arry);

                    menus += '</li>';

                }

                menus += '</ul>';

            }

        }

        //根据菜单主键id获取下级菜单

        //id：菜单主键id

        //arry：菜单数组信息

        function GetParentArry(id, arry) {

            var newArry = new Array();

            for (var i in arry) {

                if (arry[i].pid == id)

                    newArry.push(arry[i]);

            }

            return newArry;

        }

    </script>

</body>

</html>

　　

JavaScript生成树形菜单（递归算法）的更多相关文章

  1. JQuery实现动态生成树形菜单

    jQuery实现动态生成树形菜单 有一个需求:菜单导航条需要依据不同的权限动态提取出来.计划是将功能模块与用户权限之间的关系保持到一个配置表中.所以功能菜单的话就需要动态提取出来再显示.借助jquer ...

  2. js实现树级递归，通过js生成tree树形菜单(递归算法)

    方法封装: /** * 数据转换为树形(递归),示例:toTreeByRecursion(source, 'id', 'parentId', null, 'children') * @param {A ...

  3. JAVA递归生成树形菜单

    递归生成一个如图的菜单,编写两个类数据模型Menu.和创建树形的MenuTree.通过以下过程实现: 1.首先从菜单数据中获取所有根节点. 2.为根节点建立次级子树并拼接上. 3.递归为子节点建立次级 ...

  4. php中生成树形菜单

    废话不多说!上代码 class tree { /** * 生成树型结构所需要的2维数组 * @var array */ var $arr = array(); /** * 生成树型结构所需修饰符号,可 ...

  5. WEB开发中前后台树形菜单的展示设计

    在WEB开发中经常需要进行树形菜单的展示,本例通过不同角度的总结了如下三种实现方式: 通过JS的递归实现前端菜单DOM的动态创建 通过JSP的include指令结合JSTL表达式语言递归实现菜单的展示 ...

  6. zTree树形菜单交互选项卡效果实现

    1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html> <head> <meta ch ...

  7. zTree树形菜单使用实例

    在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 ul设置 class=”ztree” 第二步:开启简单数据格式支持 第三步:编写树 ...

  8. Unity 引擎UGUI之自定义树形菜单（TreeView）

    先上几张效果图:          如果你需要的也是这种效果,那你就来对地方了! 目前,我们这个树形菜单展现出来的功能如下: 1.可以动态配置数据源: 2.点击每个元素的上下文菜单按钮(也就是图中的三 ...

  9. ASP.NET Boilerplate 学习 AspNet Core2 浏览器缓存使用 c#基础，单线程，跨线程访问和线程带参数 wpf 禁用启用webbroswer右键菜单 EF Core 2.0使用MsSql/MySql实现DB First和Code First ASP.NET Core部署到Windows IIS QRCode.js：使用 JavaScript 生成

    ASP.NET Boilerplate 学习   1.在http://www.aspnetboilerplate.com/Templates 网站下载ABP模版 2.解压后打开解决方案,解决方案目录: ...

随机推荐

  1. ios UI控件的简单整理

    把该文件拷贝到.m文件中就能够方便的查找 /** 匿名类目:能够声明方法和变量,属性为private(不同意在外部调用,且不能被继承 */ /** 发送数据的托付方,接收数据的时代理发(即代理的反向传 ...

  2. [iOS]iOS开发人员账号申请与注冊流程

    郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额任意.重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...

  3. 使用Toolbar + DrawerLayout快速实现高大上菜单侧滑

    如果你有在关注一些遵循最新的Material Design设计规范的应用的话(如果没有,假设你有!),也许会发现有很多使用了看起来很舒服.很高大上的侧滑菜单动画效果,示例如下(via 参考2): 今天 ...

  4. Oracle数据库分页查询的几种实现方法

    没有Sql Server有top那么好用,但是Oracle含有隐藏的rownum列可以灵活使用,使实现分页效果,pageSize默认10行 方法一: select * from test where ...

  5. Android Activity 悬浮 半透明边框

    1.首先来创建一个Activity,在Activity的OnCreate函数里面我们设置它为全屏,然后设置Activity的宽高为全屏*0.9,然后设置背景图片为半透明的 .9 图片 .这样就已经是非 ...

  6. 【t016】邮递员

    Time Limit: 1 second Memory Limit: 32 MB [问题描述] 邮局需要你来帮助他们为某个邮递员设计出一条能够穿过那遥远乡村的所有村子和小路至少一次的邮路(输入数据将会 ...

  7. zookeeper 半数可用/选举机制

    1.半数可用机制,半数可用指的是zk集群中一半以上的机器正常时集群才能正常工作 已经启动了hadoop002(follower),hadoop003(leader) 下面停止hadoop002 在ha ...

  8. 数据库版本管理工具Flyway——基础篇

    Flyway 默认规约 SQL 脚本文件默认位置是项目的源文件夹下的db/migration 目录. Java 代码默认位于db.migration 包. SQL 脚本文件及Java 代码类名必须遵循 ...

  9. js 图片缩显

    <script language="javascript"> var flag=false;  function MyImage(Img){  var image=ne ...

  10. 阿里云CentOS7系统搭建JavaWeb环境

    一,准备工作 1,安装目录 我们创建如下路径/usr/develop,然后在develop目录下面创建java,tomcat和mysql三个目录即可. 二,配置JDK 1.理解wget命令 wget命 ...