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. 安装绿色版mysql小记（5.7.11）

    平时使用oracle,感觉太耗我电脑内存了,实在不想用oracle做平时练习了,那就只装一个客户端,工作用..平时自己试试mysql吧..mysql的安装真麻烦,真不是傻瓜式安装就能用,稍微配置不对就 ...

  2. java完美equals方法代码段

    public boolean equals(Object otherObject) { if(this == otherObject) { // 检測this与otherObject是否引用同一个对象 ...

  3. 最好用的中文速查表（Bash，Gdb，VIM，Nano）

    最好用的中文速查表(Cheatsheet) 当年学习 Linux 时就是靠着一张常用命令小卡片,敲啥命令忘记了,经常拿起来看看,后来知道这玩意儿叫做速查表(Cheatsheet),于是开始有意识收集和 ...

  4. iOS中js与objective-c的简单交互

    1.首先是objective-c调用js中的代码,可以用UIWebview中的一个方法 stringByEvaluatingJavaScriptFromString:后面接的是js中的方法名.这个函数 ...

  5. 小强的HTML5移动开发之路（28）—— JavaScript回顾3

    一.基本数据类型 number:数字类型 string:字符串 (注意s小写:string是基本类型) boolean:布尔类型   //前三个都有对应的包装类 null:空类型 undefined: ...

  6. 移动端iPhone系列适配问题的一些坑

    完成移动端的开发项目之后,发现谷歌自带的调试器似乎没有什么太大的作用,整天借同事的苹果手机测bug,尽管同事不厌其烦,但还是觉得这iPhone系列适配问题适配到想逃逃逃,好在项目已经顺利完成,测试通过 ...

  7. Role-based access control modeling and auditing system

    A role-based access control (RBAC) modeling and auditing system is described that enables a user to  ...

  8. @AspectJ support （good）

    AspectJ类型匹配的通配符:*:匹配任何数量字符:..:匹配任何数量字符的重复,如在类型模式中匹配任何数量子包:而在方法参数模式中匹配任何数量参数.+:匹配指定类型的子类型:仅能作为后缀放在类型模 ...

  9. HDU 4847-Wow! Such Doge!（定位）

    Wow! Such Doge! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  10. Android 4.0开发之GridLayOut布局实践

    在上一篇教程中http://blog.csdn.net/dawanganban/article/details/9952379,我们初步学习了解了GridLayout的布局基本知识,通过学习知道,Gr ...