Loading

不确定层级的级联数据展示

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
posted @ 2022-05-20 16:47  梧桐树211  阅读(44)  评论(0编辑  收藏  举报