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慢日志的相关参数

    slow-query-log = on #开启MySQL慢查询功能 slow_query_log_file = /data/mysql/testdb-slow.log #设置MySQL慢查询日志路径 ...

  2. Passive DNS

    http://blog.csdn.net/cnbird2008/article/details/17250707 http://netsecurity.51cto.com/art/201510/494 ...

  3. wpf SnapsToDevicePixels

    原文:wpf SnapsToDevicePixels  可以在您的根元素上将此属性设为 true,以在整个 UI 上启用像素对齐呈现. 对于运行在大于 96 每英寸点数 (dpi) 的设备,像素对 ...

  4. Adaptive partitioning scheduler for multiprocessing system

    A symmetric multiprocessing system includes multiple processing units and corresponding instances of ...

  5. bootstrap paginator使用简述

    1.引入bootstrap-paginator.js(依赖jquery)2.html部分需要一个ul标签,接下来我们会把该标签设置为分页组件 3.js部分(核心) 注意事项: 1.通过onPageCl ...

  6. 【17.76%】【codeforces round 382C】Tennis Championship

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  7. JVM参数调优：Eclipse启动实践

    本文主要参考自<深入理解 Java 虚拟机>.这本书是国人写的难得的不是照搬代码注释的且不是废话连篇的技术书,内容涵盖了 Java 从源码到字节码到执行的整个过程,包括了 JVM(Java ...

  8. matlab 神经网络工具箱的实用

    0. 其他处理 计时: tic net = train(net, X, y); toc 1. 一个简单的 demo(单层感知器) P = [1, 1, 1, 1, 0, 0, 0, 0; 0, 0, ...

  9. Delphi中预编译指令

    本文转自 http://www.cnblogs.com/JackSun/archive/2010/12/20/1911250.html <Delphi下深入Windows核心编程>(附录A ...

  10. WPF动态创建Image的显示问题

    原文:WPF动态创建Image的显示问题 最近学习WPF,看到一篇教程讲解如何动态创建Image控件,自己练手时候无论如何也显示不出图片.刚开始以为是图片的路径有问题,可后来将图片的路径设为相对路径或 ...