blog-使用JavaScript实现一棵树

最新推荐文章于 2023-08-22 18:14:04 发布

vicki_wei

最新推荐文章于 2023-08-22 18:14:04 发布

阅读量635

点赞数 1

分类专栏：学习笔记文章标签： js

本文链接：https://blog.csdn.net/qq_39285144/article/details/103240689

版权

学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

题目：有一个数组对象，每个对象有一个属性id，name，children(存放孩子对象id的数组)。使用JavaScript根据这个数组对象实现一棵树。
HTML

<body>
    <div id="tree">
    </div>
</body>

JavaScript

// 根据数组对象打印一棵人事关系树，children数组的元素是每个对象的id
// 假定id=1为根节点
let arr = [
    {id:1,name:'校长',children:[2,3,4]},
    {id:3,name:'副校长',children:[]},
    {id:7,name:'班主任',children:[]},
    {id:6,name:'年级主任',children:[7,8]},
    {id:5,name:'年级主任',children:[]},
    {id:8,name:'班主任',children:[]},
    {id:2,name:'副校长',children:[5,6]},
    {id:4,name:'副校长',children:[]},
]

// 将数组遍历一次，将每个对象的id和name存入一个map集合中 id为key，name为value
// 以方便子元素的查找
let map = new Map();
arr.forEach((item) => {map.set(item.id,item.name)});

// 1.先过滤出有孩子节点的对象
let HasChildNode = arr.filter(item => item.children.length!=0);
// 2.将对象按id的顺序从小到大排序
HasChildNode.sort((a,b) => {if(a.id>b.id) return 1;});

// 3.遍历有孩子节点的数组对象
HasChildNode.forEach((item)=>{
    // 若该对象的id为1，则该对象为根元素
    if(item.id == 1){
        // 获取div节点
        let FatherNode = document.getElementById('tree');
        // 创建一个ul节点和li节点
        let a = document.createElement('ul');
        let b = document.createElement('li');
        // 给li节点添加id属性
        b.setAttribute('id',item.id)
        // 创建文本节点，将每棵树上节点的文字追加至li
        let c = document.createTextNode(item.id+"."+item.name);
        b.appendChild(c);
        a.appendChild(b);
        // 将根元素节点追加到div中
        FatherNode.appendChild(a);
    }
    
    // 获取当前对象id的li节点(用于追加孩子节点)
    let FatherNode = document.getElementById(item.id);
    
    // 创建一个ul节点，用于存放子元素
    let d = document.createElement('ul');
    // 遍历这个对象存放孩子节点id的数组
    item.children.forEach((item)=>{
        // 使用前面存放了id和name的map集合判断这个孩子对象是否存在
        if(map.has(item)){
            // 这个孩子对象存在则创建li节点存放文本节点
            let n = document.createElement('li');
            n.setAttribute('id',item)
            // 使用map集合的get方法根据key获取对象的name
            let x = document.createTextNode(item+"."+map.get(item));
            n.appendChild(x);
            // 将这个孩子对象追加至循环外创建的ul节点内
            d.appendChild(n)
        }
    })
    // 给有孩子节点的元素追加孩子元素
    FatherNode.appendChild(d);
})

运行结果：
在这里插入图片描述

由于作者经验不足，在代码实现功能方面能力有限，若后续有更优的实现方案作者会继续对本文进行更新
此文章为作者本人原创，仅限于作者本人的学习总结记录，若有错误之处请留言提出。

vicki_wei

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
blog-使用JavaScript实现一棵树

题目：有一个数组对象，每个对象有一个属性id，name，children(存放孩子对象id的数组)。使用JavaScript根据这个数组对象实现一棵树。HTML<body> <div id="tree"> </div></body>JavaScript// 根据数组对象打印一棵人事关系树，children数组的元素是每个对...
复制链接

扫一扫