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. Oracle成长点点滴滴（2）— 权限管理

    权限管理中权限包含系统权限以及对象权限.在解说权限管理之前我们先来了解用户的创建以及授权这些前提. 1.      创建用户以及授权 Ø  默认用户 既然提到了创建用户,首先必须先把用户的知识攻克了. ...

  2. 【t007】棋盘放置指南车问题

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] 按照国际象棋的规则,车可以攻击与之处在同一行或同一列上的棋子.指南车是有方向的车.横向指南车可以攻击与之 ...

  3. 第三方微信支付，WAP、H5、APP、公众号支付的区别

    你说一个微信支付被腾讯搞了N个版本出来,是技术问题还收费原因不得而知.公众号支付,H5(wap)支付,APP支付.看得小编一头雾水. 带点N个疑问? 1.公众号支付是在公众号里支付,支众号里引入的三方 ...

  4. spring定时任务.线程池,自定义多线程配置

    定时任务及多线程配置xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...

  5. 集装箱set相关算法

     set_union 算法set_union可构造S1.S2的并集.此集合内含S1或S2内的每个元素. S1.S2及其并集都是以排序区间表示.返回值是一个迭代器.指向输出区间的尾端. 因为S1和S ...

  6. WPF 修改图片颜色

    原文:WPF 修改图片颜色 本文告诉大家如何修改图片的颜色,如去掉图片的蓝色 在 WPF 可以使用很多图片处理的方法,本文告诉大家的是一个图片处理,可以把处理的图片保存在文件. 在阅读本文,我假设大家 ...

  7. 读取和修改xml文件

    如有一个xml文件DownData.xml,内容如下 <?xml version="1.0" standalone="yes"?> <Root ...

  8. C#颜色对照使用表

    这篇文章来来源于C# Color Table,这里是我翻译的中文版本,其中已经加上了我的一些理解和注释.翻译这篇文章的原因是我在写C#程序的时候发现,C#自带的颜色种类极多(详见下表),如果没有直观的 ...

  9. TabHost两种实现方式

    第一种:继承TabActivity,从TabActivity中用getTabHost()方法获取TabHost.只要定义具体Tab内容布局就行了. <?xml version="1.0 ...

  10. Solid-state storage management

    Solid-state storage management for a system, the management including establishing, externally to a ...