JavaScript递归算法生成树形菜单


Posted in Javascript onAugust 15, 2017

本文实例为大家分享了js生成树形菜单的具体代码,供大家参考,具体内容如下

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

JavaScript递归算法生成树形菜单

注释:本示例包含三级目录菜单,但实际上可支持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 相关文章推荐
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
理解Javascript_11_constructor实现原理
Oct 18 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
JavaScript中附件预览功能实现详解(推荐)
Aug 15 #Javascript
input输入框内容实时监测(附代码)
Aug 15 #Javascript
vue的基本用法与常见指令
Aug 15 #Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 #Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 #Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 #Javascript
form表单序列化详解(推荐)
Aug 15 #Javascript
You might like
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
PHP生成plist数据的方法
2015/06/16 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Python通过poll实现异步IO的方法
2015/06/04 Python
python如何实现int函数的方法示例
2018/02/19 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
Python实现井字棋小游戏
2020/03/09 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
2015年乡镇工作总结范文
2015/04/22 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers