已知树节点获取树的节点路径（js树节点路径）

1.目的

通过树的叶子结点id，得到输的叶子节点路径。

2.数据结构

树的存储方式——[ ];
示例数据结构;

const treeData = [{name: "擎天柱",id: 1,children: [{name: "大黄蜂",id: 10,children: [{name: "迪迦",id: 100,},{name: "泰罗",id: 101,},],},{name: "蜘蛛侠",id: 11,},],},{name: "威震天",id: 2,children: [],},{name: "机车人",id: 3,children: [{name: "太上老君",id: 30,},{name: "通天教主",id: 31,children: [{name: "孙悟空",id: 310,children: [{name: "猪八戒",id: 3100,},],},],},],},];

3.获取叶子节点路径方法

/*** 获取树节点路径* @param {*} curKey 树节点标识的值* @param {array} data 树* @returns {array} result 存放搜索到的树节点到顶部节点的路径节点*/
const getPathByKey = (curKey, data) => {/** 存放搜索到的树节点到顶部节点的路径节点 */let result = [];/*** 路径节点追踪* @param {*} curKey 树节点标识的值* @param {array} path 存放搜索到的树节点到顶部节点的路径节点* @param {*} data 树* @returns undefined*/let traverse = (curKey, path, data) => {// 树为空时，不执行函数if (data.length === 0) {return;}// 遍历存放树的数组for (let item of data) {// 遍历的数组元素存入path参数数组中path.push(item);// 如果目的节点的id值等于当前遍历元素的节点id值if (item.id === curKey) {// 把获取到的节点路径数组path赋值到result数组result = JSON.parse(JSON.stringify(path));return;}// 当前元素的children是数组const children = Array.isArray(item.children) ? item.children : [];// 递归遍历子数组内容traverse(curKey, path, children);// 利用回溯思想，当没有在当前叶树找到目的节点，依次删除存入到的path数组路径path.pop();}};traverse(curKey, [], data);// 返回找到的树节点路径return result;
};/** 对应树节点路径(数组形式) */
let pathList = getPathByKey(3100, treeData);
console.log("pathList", pathList); /* pathList [{ name: '机车人', id: 3, children: [ [Object], [Object] ] },{ name: '通天教主', id: 31, children: [ [Object] ] },       { name: '孙悟空', id: 310, children: [ [Object] ] },        { name: '猪八戒', id: 3100 }
]
*/
/** 对应树节点路径 */
let pathUrl = pathList.map((item) => item.name).join(" / ");
console.log('pathUrl',pathUrl);/* 机车人 / 通天教主 / 孙悟空 / 猪八戒
*/

已知树节点获取树的节点路径（js树节点路径）相关推荐

高德地图JS - 已知经纬度来获取街道、城市、详细地址等信息
1.时候偶现你得引入谷歌API|JS var geoCoder = new AMap.Geocoder({city: ""//城市,默认:"全国" }); va ...
js 树形结构数据已知某一子节点一次向上获取所有父节点
已知树形结构 res.现在有一个对象是{code: 1,name: "水上分局"},想向上依次获取取得父级,比如说水上分局父节点是汉阳区汉阳区父节点是武汉市武汉市父节点是湖北 ...
树形结构数据，已知某一子节点，一次向上获取所有父节点
树形结构数据, 已知某一子节点 ,一次向上获取所有父节点 //tree: 树形结构, menuid: 已知节点属性,(代码中判断id相等) function treeFindPath(tree, me ...
WebAPI-DOM树，获取父节点、获取子节点的方法汇总
DOM树 DOM树又称为文档树模型,就是把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加载到当前的页面中. DOM树就像人类家族的族谱,族谱可以很容易的表明家族成员之间的关系,将复杂 ...
element-ui中el-tree树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...
在element-ui的el-tree树形控件中默认获取选取当前选中id的方法是this.$refs.tree.getCheckedKeys(); 但是如果子节点不是全部选中的话,父节点算不选中. 由 ...
elementui tree获取父节点_elementUI 树状图点击子节点获取父节点
权限使用elementUI tree 组件,点击子节点获取对应多级的父节点这是应用的组件 :data="hovePermissData" :default-checked- ke ...
el-tree对已知节点设置disable
记录项目遇到的el-tree禁用已知节点问题 <el-form-item label="角色权限"><el-treeref="tree":da ...
【算法】【树】已知先序中序序列求后序序列（详细解释）
题目描述如题所示,已知先序中序序列建树与求后序序列算法原理利用递归和分制的思想,找到当前树先序序列的根节点,然后找到对应中序序列的位置,然后根据根节点在中序序列中的位置来判断左右子树分别的位置, ...
树（2）-----leetcode(层、深度、节点)
1.树的类实现: class TreeNode(object):def __init__(self, x):self.val = xself.left = Noneself.right = None ...
extjs2.0 ie8 下拉树_extjs2下拉树选项框comboxWithTree(支持异步加载子节点）
extjs版本:2.2 简介:支持单选.异步加载子节点(当然一下子拼接好全部节点的json也是绝对没问题的),要支持多选则需要自行设置,(已测试通过)浏览器兼容ie8.谷歌.FF. 资料参考:搜索一下 ...

已知树节点获取树的节点路径（js树节点路径）

1.目的

2.数据结构

3.获取叶子节点路径方法

已知树节点获取树的节点路径（js树节点路径）相关推荐

最新文章

热门文章