郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

懒人建站提供网页素材下载、网站模板
这一切都是免费的!
当前位置:懒人建站 > javascript教程 >

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

来源:懒人建站工作室 作者: 懒人建站 日期:2017-01-10 人气:
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递归算法实现无限级树形菜单由懒人建站收集整理,您可以自由传播,请主动带上本文链接

懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

(责任编辑:懒人建站)