js递归算法实现无限级树形菜单

来源：懒人建站工作室作者：懒人建站日期：2017-01-10 人气:8471 QQ交流群:4188479

js递归算法实现无限级树形菜单，主要是学习下用js递归算法实现无限级树形菜单，在学习php的时候网站后台要用到无限级栏目，于是就试着写无限级树形菜单，这里没有使用php写，使用 js递归算法实现无限级树形菜单，并不是一个完整的插件，只是学习下用js递归算法实现无限级树形菜单，在学习php的时候网站后台要用到无限级栏目，于是就试着写无限级树形菜单，这里没有使用php写，使用js练习一下。

栏目数据格式：

通常网站栏目的数据表应该是这样子的，

$address = array(
    array('id'=>1  , 'address'=>'安徽' , 'parent_id' => 0),
    array('id'=>2  , 'address'=>'江苏' , 'parent_id' => 0),
    array('id'=>3  , 'address'=>'合肥' , 'parent_id' => 1),
    array('id'=>4  , 'address'=>'庐阳区' , 'parent_id' => 3),
    array('id'=>5  , 'address'=>'大杨镇' , 'parent_id' => 4),
    array('id'=>6  , 'address'=>'南京' , 'parent_id' => 2),
    array('id'=>7  , 'address'=>'玄武区' , 'parent_id' => 6),
    array('id'=>8  , 'address'=>'梅园新村街道', 'parent_id' => 7),
    array('id'=>9  , 'address'=>'上海' , 'parent_id' => 0),
    array('id'=>10 , 'address'=>'黄浦区' , 'parent_id' => 9),
    array('id'=>11 , 'address'=>'外滩' , 'parent_id' => 10)
    array('id'=>12 , 'address'=>'安庆' , 'parent_id' => 1)
    );

这是php输出的栏目数据格式

转化成js的json对象就是这样子的：

var data = [
    {id: 1, address: "安徽", parent_id: 0},
    {id: 2, address: "江苏", parent_id: 0},
    {id: 3, address: "合肥", parent_id: 1},
    {id: 4, address: "庐阳区", parent_id: 3},
    {id: 5, address: "大杨镇", parent_id: 4},
    {id: 6, address: "南京", parent_id: 2},
    {id: 7, address: "玄武区", parent_id: 6},
    {id: 8, address: "梅园新村街道", parent_id: 7},
    {id: 9, address: "上海", parent_id: 0},
    {id: 10, address: "黄浦区", parent_id: 9},
    {id: 11, address: "外滩", parent_id: 10},
    {id: 12, address: "安庆", parent_id: 1}
];

根据最后一个找到整个家族（家谱树）

//根据最后一个找到整个家族
function familyTree(arr, pid) {
    var temp = [];
    var forFn = function(arr, pid){
        for (var i = 0; i < arr.length; i++) {
            var item = arr[i];
            if (item.id == pid) {
                temp.push(item);

                forFn(arr,item.parent_id);
            }
        }
    };
    forFn(arr, pid);
    return temp;
}

//console.log(familyTree(data,10));

从顶级往下找到所有的子子孙孙（子孙树）

//子孙树，从顶级往下找到是有的子子孙孙
function sonsTree(arr,id){
    var temp = [],lev=0;
    var forFn = function(arr, id,lev){
        for (var i = 0; i < arr.length; i++) {
            var item = arr[i];
            if (item.parent_id==id) {
                item.lev=lev;
                temp.push(item);
                forFn(arr,item.id,lev+1);
            }
        }
    };
    forFn(arr, id,lev);
    return temp;
}
//console.log(sonsTree(data,0));

利用子孙树生成一个树形dom结构（实例）

//利用 子孙树 生成dom结构
var tree = sonsTree(data,0);
var temp = [];
for(var i=0;i<tree.length;i++){
    var item = tree[i],u = "";
    if(i>0){
        u = "</ul>";
    }
    if(item['lev']==0){
        temp.push(u+'<li><a class="one">'+item.address+'</a><ul>');
    }else{
        temp.push('<li><a>'+item.address+'</a></li>')
    }
    if(i+1==tree.length){
        temp.push("</ul>")
    }
}
//console.log(temp.join(""));

理论性文章请参考：递归方式和迭代方式实现无限极分类

本文链接： js递归算法实现无限级树形菜单http://www.51xuediannao.com/javascript/digui_shu.html

js无限极菜单实现