本文实例为大家分享了js生成树形菜单的具体代码,供大家参考,具体内容如下
<强> 1,最终效果图强(这里仅为实现算法,并加载至页面,不做任何css界面优化)
注释:本示例包含三级目录菜单,但实际上可支持N级(可使用该代码自行测试)
<强> 2,数据源
菜单信息一般来源于数据库中数据表,且为自连接表,其中包含主要字段(主键,菜单名称,父级id),
本示例在前端页面中使用对象数组模拟从数据库获取菜单信息;
var menuArry=[
{id: 1,名字:“办公管理”,pid: 0},
{id: 2、名称:“请假申请”,pid: 1},
{id: 3名:“出差申请”,pid: 1},
{id: 4,名字:“请假记录”,pid: 2},
{id: 5名:“系统设置”,pid: 0},
{id: 6名:“权限管理”,pid: 5},
{id: 7、名称:“用户角色”,pid: 6},
{id: 8、名称:“菜单设置”,pid: 6},
];之前
注释:id——菜单主键id;名字——菜单名称;pid -父级id
<强> 3,程序设计
菜单信息一般来源
//菜单列html表
var="菜单;//根据菜单主键id生成菜单列html表//id:菜单主键id//进行:菜单数组信息
函数GetData (id、进行){
var childArry=GetParentArry (id、进行);
如果(childArry。长度比;0){
菜单+=& lt; ul>”;
我在childArry (var) {
菜单+=& lt; li>”+ childArry[我]. name;
GetData (childArry[我]。id,进行);
菜单+=& lt;/li>;
}
菜单+=& lt;/ul>;
}
}//根据菜单主键id获取下级菜单//id:菜单主键id//进行:菜单数组信息
进行函数GetParentArry (id) {
var newArry=new Array ();
(我在进行var) {
如果进行[我]。pid==id)
[我]newArry.push(进行);
}
返回newArry;
}
之前
注释:本示例菜单使用ul无序列表演示,菜单变量为最终生成的菜单html
<强> 4,运行
menuArry GetData (0)
$(“身体”).append(菜单);
之前
注释:GetData (0, menuArry), 0,顶级菜单主键
<强> 5,完整代码
& lt; !DOCTYPE html>
& lt; html xmlns=" http://www.w3.org/1999/xhtml "比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title> & lt;/title>
& lt;脚本src=" https://www.yisu.com/zixun/jquery-1.8.3.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt;脚本type=" text/javascript祝辞
$(函数(){
var menuArry=[
{id: 1,名字:“办公管理”,pid: 0},
{id: 2、名称:“请假申请”,pid: 1},
{id: 3名:“出差申请”,pid: 1},
{id: 4,名字:“请假记录”,pid: 2},
{id: 5名:“系统设置”,pid: 0},
{id: 6名:“权限管理”,pid: 5},
{id: 7、名称:“用户角色”,pid: 6},
{id: 8、名称:“菜单设置”,pid: 6},
];
menuArry GetData (0)
$(“身体”).append(菜单);
});//菜单列html表
var="菜单;//根据菜单主键id生成菜单列html表//id:菜单主键id//进行:菜单数组信息
函数GetData (id、进行){
var childArry=GetParentArry (id、进行);
如果(childArry。长度比;0){
菜单+=& lt; ul>”;
我在childArry (var) {
菜单+=& lt; li>”+ childArry[我]. name;
GetData (childArry[我]。id,进行);
菜单+=& lt;/li>;
}
菜单+=& lt;/ul>;
}
}//根据菜单主键id获取下级菜单//id:菜单主键id//进行:菜单数组信息
进行函数GetParentArry (id) {
var newArry=new Array ();
(我在进行var) {
如果进行[我]。pid==id)
[我]newArry.push(进行);
}
返回newArry;
}
& lt;/script>
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
