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

最新推荐文章于 2025-06-05 09:13:21 发布

原创最新推荐文章于 2025-06-05 09:13:21 发布 · 7.7k 阅读

7 ·

CC 4.0 BY-SA版权

本文介绍如何将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);
        }
    }
}