JavaScript递归算法实现多级树形菜单生成
本文介绍如何使用JavaScript递归算法在前端生成多级树形菜单。通过模拟数据库自连接表数据，利用递归函数遍历节点，将扁平数组转换为嵌套的HTML列表结构。示例包含完整代码及运行逻辑，支持N级目录扩展，适用于需要动态展示层级关系的前端场景。
JavaScript递归生成树形菜单概述
本文分享了一段使用JavaScript生成树形菜单的具体代码实现，供读者参考学习。
首先展示最终生成的菜单效果。本示例仅关注算法逻辑与页面加载，未进行CSS样式美化。
注：该示例演示了三级目录结构，但代码逻辑支持任意深度的N级菜单，用户可自行测试验证。
数据源结构与程序设计
接下来分析数据源结构。
通常菜单数据来自数据库中的自连接表，主要包含主键、菜单名称和父级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代表菜单主键，name为菜单名称，pid表示父级ID。
随后进入程序设计环节。
菜单数据通常来源于后端数据库，此处为演示方便，前端直接构造数据。
//菜单列表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字符串。
代码运行与完整实现
接着介绍运行方式。
GetData(0, menuArry)
$("body").append(menus);
注：调用GetData(0, menuArry)，其中参数0代表顶级菜单的主键ID。
最后提供完整代码供参考。
<!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>
以上为本文全部内容，希望能为读者提供学习帮助，欢迎继续支持本站。
5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑：这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式：声明、表达式与箭头函数
2026-11-05 13:50:55