var data = [
{id: '1',name: '1',parentId: null,},
{id: '2',name: '1-1',parentId: '1', },
{id: '3',name: '1-2',parentId: '1',},
{id: '4',name: '2',parentId: null,},
{id: '5',name: '2-1',parentId: '4',},
{id: '6',name: '2-2',parentId: '4',},
{id: '7',name: '2-2-1',parentId: '6',}
]
function fn(data, rootId = null) {
const children = []
data.forEach(item => {
if (item.parentId === rootId) {
// 最关键的俩步
children.push(item)
//如果每一项的parentId=rootId就添加到数组里
item.children = fn(data, item.id)
//给每一项加children属性,值递归将所有数据传入,取所有数据parentId=item.id的作为子项
}
});
return children
}
const data1 = fn(data, null)
function digui(data1) {
if (!data1) {
return ''
}
var html = '<ul >';
for (var i = 0; i < data1.length; i++) {
html += '<li>' + data1[i].name;
html += digui(data1[i].children); //中间的内容递归,把children传入,生成ul、li。
html += '</li>\n';
};
html += '</ul>';
return html;
}
const html = digui(data1)
document.getElementsByClassName("list")[0].innerHTML = html