将Json数组转换为树形结构生成菜单列表

本文介绍如何将Json数组转换成树形结构,以便于生成动态菜单列表。内容涉及Json处理技巧和数据转换算法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

/*将Json数组转换为树形结构*/
function transDate(list,idstr,pidstr){
    var result = [],temp = {};
    for(i = 0; i < list.length; i++){
        temp[list[i][idstr]]=list[i];//将nodes数组转成对象类型
    }
    for(j=0; j<list.length; j++){
        tempVp = temp[list[j][pidstr]]; //获取每一个子对象的父对象
        if(tempVp){//判断父对象是否存在,如果不存在直接将对象放到第一层
            if(!tempVp["nodes"]) tempVp["nodes"] = [];//如果父元素的nodes对象不存在,则创建数组
            tempVp["nodes"].push(list[j]);//将本对象压入父对象的nodes数组
        }else{
            result.push(list[j]);//将不存在父对象的对象直接放入一级目录
        }
    }
    return result;

};

/*Dom*/

var showlist = $("<ul></ul>");
console.log(menulist);
console.log(menulist.nodes);
showall(menulist.nodes, showlist);

/*将树形结构生成菜单*/
function renderMenu(menu, parent) {
    console.log('parent:'+menu);
    var parent_id =menu.parent_id;
    console.log('parent_id'+menu.parent_id);
    var el = $('<a href="' + menu.link  +'">' + menu.title + '</a>');
    $(parent).append(el);
    if (menu.parent_id !='0') {
        return parent;
    }
    var ul = $('<ul/>');
    for (var i = 0; i < menu.nodes.length; ++i) {
        var li = $('<li/>');
        renderMenu(menu.nodes[i], li);
        ul.append(li);
    }
    $(parent).append(ul);
    return parent;
};
function render(json) {
    var div = $('<div/>');
    return renderMenu(json, div);
};

function showall(menu_list, parent) {
    console.log(menu_list)
    for (var menu in menu_list) {
        //如果有子节点,则遍历该子节点
        if (menu_list[menu].nodes.length > 0) {
            //创建一个子节点li
            var li = $("<li></li>");
            //将li的文本设置好,并马上添加一个空白的ul子节点,并且将这个li添加到父亲节点中
            $(li).append(menu_list[menu].title).append("<ul></ul>").appendTo(parent);
            //将空白的ul作为下一个递归遍历的父亲节点传入
            showall(menu_list[menu].nodes, $(li).children().eq(0));
        }
        //如果该节点没有子节点,则直接将该节点li以及文本创建好直接添加到父亲节点中
        else {
            $("<li></li>").append(menu_list[menu].title).appendTo(parent);
        }
    }
}




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值