原生JavaScript+HTML5实现树形目录结构一维数组生成多维数组detailssummary

Posted 2022-05-19 web半晨

目录

• 1、HTML
• 2、JavaScript
• 3、CSS

---

1、html

<div id="menuBox"></div>

---

2、javascript

mainInit();

// 数据处理
// 扁平数组结构转换成JSON树形结构
function mainInit() 
    // 源数据
    let data = [
         id: 5, parentId: 2, name: "目录1-1-1", ,
         id: 1, parentId: 0, name: "目录1", ,
         id: 13, parentId: 9, name: "目录2-2-3", ,
         id: 3, parentId: 1, name: "目录1-2", ,
         id: 2, parentId: 1, name: "目录1-1", ,
         id: 12, parentId: 9, name: "目录2-2-2", ,
         id: 4, parentId: 1, name: "目录1-3", ,
         id: 7, parentId: 0, name: "目录2", ,
         id: 9, parentId: 7, name: "目录2-2", ,
         id: 6, parentId: 2, name: "目录1-1-2", ,
         id: 11, parentId: 9, name: "目录2-2-1", ,
         id: 8, parentId: 7, name: "目录2-1", ,
         id: 10, parentId: 7, name: "目录2-3", ,
    ];

    // 构造一个新对象
    // 对象的属性名是id值
    // 对象的属性值是数组对应项的值
    let map = ;
    data.forEach(item => 
        map[item.id] = item;
    );
    const result = [];
    data.forEach(item => 
        const parent = map[item.parentId];
        if (parent) 
            // 如果有children则push数据到children中
            // 如果没有就新建一个空的children数组
            // 然后再push数据
            parent.children = parent.children || [];
            parent.children.push(item);
         else 
            // 在本例中
            // else只会进入两次
            // 也是最外层目录
            result.push(item);
        
    );

    const root = document.getElementById('menuBox');

    createMenu(result, root);


// 生成标签元素
function createMenu(data, root) 
    if (!data.length) throw new Error('粗错啦');

    data.forEach(item => 
        const detailsEle = document.createElement('details');
        const summaryEle = document.createElement('summary');
        const span = document.createElement('span');
        span.innerHTML = item.name;
        summaryEle.appendChild(span);
        detailsEle.appendChild(summaryEle);
        root.appendChild(detailsEle);

        if (item.children?.length) createMenu(item.children, detailsEle);
    );

---

3、CSS

null