javascript递归算法实现无限级树形菜单
2021/03/07    标签: javascript无线级菜单   

菜单栏目常见格式:

<?php
   $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)
    );
   ?>

转化成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 htmlUL = '<ul>';
        for(var i=0;i<tree.length;i++){
            if(i==tree.length-1){//最后一个元素
                htmlUL += '<li>' + tree[i].address + '</li>' + new Array(tree[i].lev+1).join('</ul></li>'); 
            }else{
                if(tree[i+1].lev > tree[i].lev){
                    htmlUL += '<li>' + tree[i].address +'<ul>';
                } else if( tree[i+1].lev == tree[i].lev){
                    htmlUL += '<li>' + tree[i].address + '</li>';
                } else if ( tree[i+1].lev < tree[i].lev){
                    htmlUL += '<li>' + tree[i].address + '</li>' + new Array(tree[i].lev - tree[i+1].lev +1).join('</ul></li>');
                }
            }
        }
        htmlUL += '</ul>';
        console.log(htmlUL)
        treeUL.innerHTML = htmlUL;
        var htmlDL = '<dl>';
            for(var i = 0; i < tree.length; i++){
                if(i == tree.length-1){
                    htmlDL += '<dd>' + tree[i].address + '</dd>' + new Array(tree[i].lev + 1).join('</dl></dd>');
                }else{
                    if(tree[i+1].lev > tree[i].lev){
                        htmlDL += '<dd><dl><dt>' + tree[i].address + '<dt>';
                    }else if(tree[i+1].lev == tree[i].lev){
                        htmlDL += '<dd>' + tree[i].address + '</dd>';
                    }else if(tree[i+1].lev <tree[i].lev){
                        htmlDL += '<dd>' + tree[i].address + '</dd>' + new Array(tree[i].lev - tree[i+1].lev + 1).join('</dl></dd>');
                    }
                }
            }
            htmlDL+='</dl>';
            console.log(htmlDL);
            treeDL.innerHTML = htmlDL;

部分选自:懒人建站