当前位置: 代码迷 >> 综合 >> 数组数据 转化为 树状结构数据
  详细解决方案

数组数据 转化为 树状结构数据

热度:59   发布时间:2024-01-29 00:30:09.0

codepen地址:

codepen地址

var aTree = [{"id": "1", "name": "动物", "pid": "0"},{"id": "2", "name": "鸟类", "pid": "5"},{"id": "3", "name": "无脊椎动物", "pid": "1"},{"id": "4", "name": "哺乳动物", "pid": "5"},{"id": "5", "name": "脊椎动物", "pid": "1"},{"id": "6", "name": "喜鹊", "pid": "2"},{"id": "7", "name": "蚯蚓", "pid": "3"}
];
function getParent(id, aTree) {var aParent = [];aTree.map((item,index)=>{if(item.pid==id){aParent.push(item);}})// for (var i in aTree) {//     if (aTree[i].pid == id) {//         aParent.push(aTree[i]);//     }// }return aParent;
}var menu = '';
function makeTree(id, aTree){var topMenu = getParent(id, aTree);if (topMenu.length > 0) {topMenu.map((item,index)=>{menu += '<a href="#" onClick="alert('+item.id+')">' + item.name + '</a>';menu += '<ul>' // 为了区分层次,我们给每一个子级都包上一层ulmakeTree(item.id, aTree);menu += '</ul>'})// for (var i in topMenu) {//     menu += '<a href="#">' + topMenu[i].name + '</a>';//     menu += '<ul>' // 为了区分层次,我们给每一个子级都包上一层ul//     makeTree(topMenu[i].id, aTree);//     menu += '</ul>'// }}
}
makeTree(0, aTree);
$('body').append(menu);

 

  相关解决方案