记录JS如何使用广度遍历找到节点的所有父节点
我们在实际的工作业务场景中经常遇到这样的场景,求取树数据中某个节点的父亲节点以及所有的父亲节点,这样的场景下不建议使用深度遍历,使用广度遍历可以更快找到。
1、案例解说
比如树的长相是这样的:
树的数据是这样的:
是我们常用的树的数据及长相。
2、业务要求
在【测试抽取5】后面新增一个节点,要求
1)接口要求传入当前节点的父节点;
2)新增后重新获取树数据,默认展开所有的父级
3、代码实现及说明
思路:
1)设定一个排队数组parentIdsQueue
将树数据开始排队;
2)如果当前数据有孩子节点,将孩子节点倒序加入队列中,因为遍历的时候是从第一个数据开始的;
3)如果当前数据有孩子节点,在孩子加入队列前,把父亲节点的数据放到parentArr
中;
4)如果找到了节点,如果是第一层的节点,直接获取即可;如果包括parentArr
,则parentArr
中的全是它的父级节点
多说无益,先上实现代码
// id 指的是当前点击的节点id;
findParentNode (id) {
// 初始化所需数据
this.firstParentObj = {}; // 记录直系父级的名称和id即接口要传的数据
this.parentIds = []; // 记录所有的父级ids
this.parentIdsQueue = []; // 记录排队的
// 将树放到排队系列
this.parentIdsQueue = this.treeData;
// 开始遍历排队的树
while (this.parentIdsQueue.length) {
//抽取第一个排队的数据
let item = this.parentIdsQueue.shift();
let { children } = item;
if (item.id === id) {
// 第一层就找到了
if (!item.parentArr) {
this.firstParentObj = {
id: item.id,
name: item.title
};
this.parentIds = [item.id];
} else {
// 获取当前节点的parentArr
let len = item.parentArr.length;
this.firstParentObj = item.parentArr[len - 1];
item.parentArr.forEach(a => {
this.parentIds.push(a.id);
});
this.parentIds.push(item.id);
}
// 结束遍历
this.parentIdsQueue = [];
break;
} else if (children && children.length) {
let len = children.length;
for (let i = len - 1; i >= 0; i--) {
// 新建一个数组用于记录它的父亲节点
children[i].parentArr = [];
// 把它的历史父亲节点们先放入
if (item.parentArr) {
children[i].parentArr = children[i].parentArr.concat(
item.parentArr
);
}
// 再放入当前的父亲节点
children[i].parentArr.push({
id: item.id,
name: item.title
});
// 加入到排队序列中
this.parentIdsQueue.unshift(children[i]);
}
}
}
}
5、结果演示
我们在文前举的例子中添加个节点,现在来打印出所需的数据
console.log("测试抽取5的所有父亲",item.parentArr);
console.log("接口所需的父亲节点数据",this.firstParentObj);
console.log("设置树展开所需的所有父亲节点数据节点id", this.parentIds);
如图所示,我们已经实现了相关的功能。至于树的展开,获取的所有的父亲节点,遍历树id在parentIds
中的设置其expand
为true即可。
记录JS如何使用广度遍历找到节点的所有父节点的更多相关文章
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
- T-Sql 递归查询(给定节点查所有父节点、所有子节点的方法)
-- 查找所有父节点with tab as( select Type_Id,ParentId,Type_Name from Sys_ParamType_V2_0 where Type_Id=316-- ...
- [SQL]T-Sql 递归查询(给定节点查所有父节点、所有子节点的方法)
T-Sql 递归查询(给定节点查所有父节点.所有子节点的方法) -- 查找所有父节点with tab as( select Type_Id,ParentId,Type_Name from Sys_ ...
- Treeview控件如何获得子节点的所有父节点的名称
Delphi或c++ 的treeview控件,比如一个节点上面有个父节点,这个父节点上面还有一个父节点,如何获得这两个父节点的名字呢?请给出实现代码 先定义一个nodevarnode:TTreeNod ...
- 遍历DOM树,获取父节点
通过获取父节点,还可以获取父节点的父节点. 有3个常用方法: 方法 说明 parent() 选取父节点 parents() 选取所有父节点 parentsUntil("div&q ...
- easyui Tree模拟级联勾选cascadeCheck,节点选择,父节点自动选中,节点取消,父节点自动取消选择,节点选择,所有子节点全部选择,节点取消,所有子节点全部取消勾选
最近项目中用到easyui tree,发现tree控件的cascadeCheck有些坑,不像miniui 的tree控件,级联勾选符合业务需求,所以就自己重新改写了onCheck事件,符合业务需求.网 ...
- 你真的会玩SQL吗?查询指定节点及其所有父节点的方法
--查询ID = '009'的所有父节点 ' ;WITH T AS ( SELECT ID , PID , NAME FROM TB WHERE ID = @ID UNION ALL SELECT A ...
- javascript : 找到一个树型数据的一个节点及其所有父节点
如题. (function () { let tree = { "id": 0, "label": "all", "childre ...
- extjs4 树列表 添加子节点 刷新所有父节点数据
itemclick:function(view, record, item,index){console.log(record.parentNode) for(pNode = record.paren ...
随机推荐
- fastjson使用-- @JSONField使用(转)
@JSONField可以配置到字段和方法上,那不同的配置有什么不同呢?下面我们就来看看具体配置到不同的方法上. 我们在创建实体类的时候,都要求属性必须创建get和set方法,否则fastjson将不会 ...
- Android-隐藏app图标以及隐式启动
隐藏APP桌面图标 <activity android:name=".LaunchActivity"> <intent-filter> <action ...
- python列表排序用法
错误用法::: a=list('hdfoiegfjil').sort()
- 【第十一篇】这一篇来说说MVC+EF+easyui datagrid的查询功能
老规矩 直接上代码 <form class="form-horizontal"> <div class="box-body"> < ...
- Java线程常见面试题
v 多线程实现手段: (1).继承Thread类 (2)实现Runable接口 (3)使用线程池 v 线程控制在那个包:java.util.concurrent. (1)提供了线程的运行.(2)线程池 ...
- 自定义JDBC工具类(配置文件)
import java.io.IOException; import java.io.InputStream; import java.sql.Connection; import java.sql. ...
- Spring Boot 入门之整合 log4jdbc 篇(六)
博客地址:http://www.moonxy.com 一.前言 Spring Data JPA 默认采用 Hibernate 实现.Hibernate 的 showSql 配置只打印 SQL,但并不打 ...
- windows下安装spark
1.安装jdk 2.安装scala 3.下载spark spark下载地址 3.1安装spark 将下载的文件解压到一个目录,注意目录不能有空格,比如说不能解压到C:\Program Files 作者 ...
- WordPress 文章插入的超链接访问不了
这两天学习WordPress的时候,想着插入超链接直接访问地址,但是没成功.比如添加一个百度的超链接点击之后,就会变成 https://网站域名/go/?url=http://www.baidu.co ...
- springboot jpa使用
1.添加pom依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...