JS 树形结构 根据子节点找到所有上级,比如element-tree,已知路由上的子结点id,如何回填的 展开目录树?
树的查找与遍历都非常简单,具体可以查看我之前写的:《讲透学烂二叉树(三):二叉树的遍历图解算法步骤及JS代码》
或者:JS树结构操作:查找、遍历、筛选、树和列表相互转换 https://wintc.top/article/20
但是 如何根据子结点找所有父节点的目录的呢?之前的遍历与查找的代码并不能解决这个问题,这里我单独给出一段代码:
export?default?function?findParents(arr,?id,?findProps?=?'id',?childProps?=?'children')?{
??const?stock?=?[];
??let?going?=?true;
??function?recursion(arr,?id,?findProps,?childProps)?{
????arr.forEach((item)?=>?{
??????if?(!going)?return;
??????stock.push(item[findProps]);
??????if?(item[findProps]?===?id)?{
????????going?=?false;
??????}?else?if?(item[childProps])?{
????????recursion(item[childProps],?id,?findProps,?childProps);
??????}?else?{
????????stock.pop();
??????}
????});
????if?(going)??stock.pop();
??}
??recursion(arr,?id,?findProps,?childProps);
??return?stock;
}
比如:
function?findParents(arr,?id,?findProps?=?'id',?childProps?=?'children')?{
??const?stock?=?[];
??let?going?=?true;
??function?recursion(arr,?id,?findProps,?childProps)?{
????arr.forEach((item)?=>?{
??????if?(!going)?return;
??????stock.push(item[findProps]);
??????if?(item[findProps]?===?id)?{
????????going?=?false;
??????}?else?if?(item[childProps])?{
????????recursion(item[childProps],?id,?findProps,?childProps);
??????}?else?{
????????stock.pop();
??????}
????});
????if?(going)??stock.pop();
??}
??recursion(arr,?id,?findProps,?childProps);
??return?stock;
}
var?a?=?[
??{
????'id':?68,
????'space_id':?1,
????'title':?'33333',
????'folder_id':?0,
????'is_folder':?true,
????'is_default':?false,
????'build_in':?true,
????'created_by':?'andyljzhou',
????'updated_by':?'andyljzhou',
????'created_time':?'2022-04-21T11:41:09.863650Z',
????'updated_time':?'2022-04-21T11:42:56.004976Z',
????'children':?[
??????{
????????'id':?72,
????????'space_id':?1,
????????'title':?'333',
????????'folder_id':?68,
????????'is_folder':?true,
????????'is_default':?false,
????????'build_in':?true,
????????'created_by':?'andyljzhou',
????????'updated_by':?'andyljzhou',
????????'created_time':?'2022-04-21T11:58:03.376084Z',
????????'updated_time':?'2022-04-21T11:58:03.376115Z',
????????'children':?[
??????????{
??????????'id':?82,
??????????'space_id':?1,
??????????'title':?'面板',
??????????'folder_id':?72,
??????????'is_folder':?false,
??????????'is_default':?false,
??????????'build_in':?true,
??????????'created_by':?'andyljzhou',
??????????'updated_by':?'andyljzhou',
??????????'created_time':?'2022-04-22T03:36:44.364097Z',
??????????'updated_time':?'2022-04-22T03:36:44.364130Z',
??????????'children':?[]
????????}]
??????},?{
????????'id':?75,
????????'space_id':?1,
????????'title':?'222',
????????'folder_id':?68,
????????'is_folder':?true,
????????'is_default':?false,
????????'build_in':?true,
????????'created_by':?'andyljzhou',
????????'updated_by':?'andyljzhou',
????????'created_time':?'2022-04-21T12:06:48.781045Z',
????????'updated_time':?'2022-04-21T12:06:48.781077Z',
????????'children':?[]
??????}]
??}
]
console.log(findParents(a,82))
这样就可以查找满足任意前端组件 tree 的回填了
转载本站文章《树形结构已知子节点获取子节点所有父节点——任意目录/树》, 请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/js/2022_0422_8797.html
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。