您的位置:首页 > Web前端 > JavaScript

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

2017-03-31 14:13 1211 查看
/*将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) {//创建一个子节点livar 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);}}}

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐