用JavaScript递归算法生成树形菜单

这个例子分享了js生成树菜单的具体代码，供大家参考。具体内容如下

1.最终渲染(这里，只有算法被实现并加载到页面，没有任何css接口优化)

注意：这个例子包含一个三级目录菜单，但是它实际上可以支持N级(您可以使用这个代码自己测试)

2.数据源

菜单信息一般来自数据库中的数据表，是一个自连表，包含主字段(主键、菜单名、父ID)；

本示例使用对象数组模拟从首页的数据库中获取菜单信息。

Var menuarry=[{id: 1，名称：' office management '，pid: 0 }，{ id: 2，名称： '请假申请'，pid: 1 }，{ id: 3，名称： '出差申请'，pid: 1} {id: 4，名称： '请假记录'，pid: 2 }，{id3: 5注意：id——菜单主键ID；名称——菜单名称；Pid——父id

3.设计

菜单信息的一般来源

//菜单列表html var menus=//根据菜单主键id html //id:菜单主键id //arry:菜单数组信息函数getdata (id，arry){ var childry=get parent arry(id，arry)；if(childarry . length 0){ menu=' ul '；for(var I in child arry){ menu=' Li ' child arry[I]。姓名；GetData(childArry[i])。id，arry)；菜单='/Li '；}菜单='/ul '；} }//根据菜单主键id //id: menu主键id //arry:菜单数组信息函数get parent arry (id，arry){ var new arry=new array()；for (var i in arry) { if (arry[i])。PID==id)NewArry . push(arry[I])；}返回newArry}注意：此示例菜单由ul无序列表演示，菜单变量是最终生成的菜单html

4.操作

GetData(0，menuArry)$('body ')。追加(菜单)；备注：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=' http : jquery-1 . 8 . 3 . min . js '/script/head body script type=' text/JavaScript ' $(function(){ var menuarry=[{ id : 1，name:' office management '，PID : 0 0 }，{id: 2，name:' leave application '，PID : { 1 }，{ id 3:GetData(0，menuArry) $('body ')。追加(菜单)；});//菜单列表html var menus=//根据菜单主键id html //id:菜单主键id //arry:菜单数组信息函数getdata (id，arry){ var childry=get parent arry(id，arry)；if(childarry . length 0){ menu=' ul '；for(var I in child arry){ menu=' Li ' child arry[I]。姓名；GetData(childArry[i])。id，arry)；菜单='/Li '；}菜单='/ul '；} }//根据菜单主键id //id: menu主键id //arry:菜单数组信息函数get parent arry (id，arry){ var new arry=new array()；for (var i in arry) { if (arry[i])。PID==id)NewArry . push(arry[I])；}返回newArry}/脚本/正文/html以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。