html遍历无限级树,无限级树构造并遍历输出指定条件叶子

本文介绍了如何根据平级数据构造无限级树型结构,并通过广度优先和深度优先遍历方法找到所有满足特定条件的叶子节点。通过递归函数实现无限级树的构造,广度优先遍历用于快速查找叶子节点,而深度优先遍历则用于按顺序输出指定条件的叶子节点。示例代码详细展示了整个过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

场景介绍

数据

实现

构造无限级

广度优先遍历

深度优先遍历

完整代码

场景介绍

最近接到一个需求,需要根据平级结构构造无限级树型结构,界面类似下边这样的结构

1270fe8c5d858b4e65ad087534df67bd.png

然后,还需要把所有的橙色标记的叶子节点从垂直方向筛选出来,最终效果就是得到一个这样顺序的一级数组

KKK

QQQ

JJJ

HHH

GGG

LLL

需要根据AAA这个节点和他所有子节点的数据,构造出一个无限级树型结构,如下

43080206bbab2928a67ac780aea6f424.png

数据

顶级AAA数据

{"id":348019,"name":"AAA","is_leaf":2,"parent_id":347234,"type":0,"order":["348020"]}

AAA所有的孩子节点

[{"id":348020,"name":"BBB","is_leaf":2,"parent_id":348019,"type":0,"order":["348037","348033","348021","348023","348034"]},{"id":348021,"name":"CCC","is_leaf":2,"parent_id":348020,"type":0,"order":["348022","348035"]},{"id":348022,"name":"DDD","is_leaf":2,"parent_id":348021,"type":0,"order":["348024","348032","348030"]},{"id":348024,"name":"EEE","is_leaf":2,"parent_id":348022,"type":0,"order":["348025","348036"]},{"id":348025,"name":"FFF","is_leaf":2,"parent_id":348024,"type":0,"order":["348031"]},{"id":348030,"name":"HHH","is_leaf":1,"parent_id":348022,"type":11,"order":[]},{"id":348023,"name":"GGG","is_leaf":1,"parent_id":348020,"type":11,"order":[]},{"id":348031,"name":"QQQ","is_leaf":1,"parent_id":348025,"type":11,"order":[]},{"id":348032,"name":"JJJ","is_leaf":1,"parent_id":348022,"type":11,"order":[]},{"id":348035,"name":"MMMu65e0u53f6u5b50","is_leaf":2,"parent_id":348021,"type":0,"order":[]},{"id":348036,"name":"NNNu65e0u53f6u5b50","is_leaf":2,"parent_id":348024,"type":0,"order":[]},{"id":348033,"name":"KKK","is_leaf":1,"parent_id":348020,"type":11,"order":[]},{"id":348037,"name":"OOO","is_leaf":2,"parent_id":348020,"type":0,"order":[]},{"id":348034,"name":"LLL","is_leaf":1,"parent_id":348020,"type":11,"order":[]}]

节点数据库结构都一样,核心是有一个parent_id,每个节点会保存直属叶子的排序order

实现

其实这里考察的是递归思想构造无限级,还有如果遍历一棵树,话不多说,上套路

构造无限级

private function getTree($list, $node)

{

$tree = [];

foreach ($list as $k => $v) {

if ($v['parent_id'] == $node['id']) {

$v['children'] = $this->getTree($list, $v);

$tree[] = $v;

}

}

if (empty($node['order'])) {

return [];

}

//注意:为了保证所有的叶子节点是根据已有的order排序,这里我们重新摆放一下

$treeMap = [];

foreach ($tree as $v) {

$treeMap[$v['id']] = $v;//建立id和数据的map

}

//根据order重新排序

$orderTree = [];

foreach ($node['order'] as $id) {//根据order的顺序重新摆放

$orderTree[] = $treeMap[$id];

}

return $orderTree;

}

我们来使用一下,使用如下

最终输出的json如下

3b35147f3cdc807a18e0027a498416c7.png

3446fb601d9cc6bb178763f67f0775b7.png

可以看到,已经构造出了一个无限级的树,并且和我们的界面是一模一样的层级和顺序

拉下来现在我们要遍历这棵树,为了获取到所有is_leaft=1的节点,我们先用广度优先遍历来试一下,因为这个对于找节点来说性能比较高

广度优先遍历

代码如下

private function bfsFindLeafs($node)

{

$result = [];//满足条件的组合

$q = [];

$q[] = $node;

while (count($q) > 0) {

$size = count($q);

for ($i = 0; $i < $size; $i++) {

$current = array_pop($q);

//判断节点如果是满足条件,加入路径

if ($current['is_leaf'] == 1) {

$result[] = $current;

}

//把所有的子节点加入队列

foreach ($current['children'] as $v) {

$q[] = $v;

}

}

}

return $result;

}

我们来使用一下

$getAllLeafs = $this->bfsFindLeafs($topNode);

echo json_encode($getAllLeafs);

运行后输出

[

{

"id": 348034,

"name": "LLL",

"is_leaf": 1,

"parent_id": 348020,

"type": 11,

"order": [],

"children": []

},

{

"id": 348023,

"name": "GGG",

"is_leaf": 1,

"parent_id": 348020,

"type": 11,

"order": [],

"children": []

},

{

"id": 348030,

"name": "HHH",

"is_leaf": 1,

"parent_id": 348022,

"type": 11,

"order": [],

"children": []

},

{

"id": 348032,

"name": "JJJ",

"is_leaf": 1,

"parent_id": 348022,

"type": 11,

"order": [],

"children": []

},

{

"id": 348031,

"name": "QQQ",

"is_leaf": 1,

"parent_id": 348025,

"type": 11,

"order": [],

"children": []

},

{

"id": 348033,

"name": "KKK",

"is_leaf": 1,

"parent_id": 348020,

"type": 11,

"order": [],

"children": []

}

]

好,我们已经可以获取到所有is_leaf为1的节点了,但是这里有一个问题,不是从上到下输出的

LLL

GGG

HHH

JJJ

QQQ

KKK

这时候,我们就需要一个深度优先遍历来实现了

深度优先遍历

深度优先遍历其实就是回滚算法的一种,为了从上到下输出,需要先序遍历

private function dfsFindLeafs($node)

{

$trackList = [];

foreach ($node['children'] as $v) {

if ($v['is_leaf'] == 1) {

$trackList[] = $v;

}

if (empty($v['children'])) {

continue;

}

$trackList = array_merge($trackList,$this->dfsFindLeafs($v));

}

return $trackList;

}

我们再来运行一下

$getAllLeafs = $this->dfsFindLeafs($topNode);

echo json_encode($getAllLeafs);

输出

[

{

"id": 348033,

"name": "KKK",

"is_leaf": 1,

"parent_id": 348020,

"type": 11,

"order": [],

"children": []

},

{

"id": 348031,

"name": "QQQ",

"is_leaf": 1,

"parent_id": 348025,

"type": 11,

"order": [],

"children": []

},

{

"id": 348032,

"name": "JJJ",

"is_leaf": 1,

"parent_id": 348022,

"type": 11,

"order": [],

"children": []

},

{

"id": 348030,

"name": "HHH",

"is_leaf": 1,

"parent_id": 348022,

"type": 11,

"order": [],

"children": []

},

{

"id": 348023,

"name": "GGG",

"is_leaf": 1,

"parent_id": 348020,

"type": 11,

"order": [],

"children": []

},

{

"id": 348034,

"name": "LLL",

"is_leaf": 1,

"parent_id": 348020,

"type": 11,

"order": [],

"children": []

}

]

顺序为

KKK

QQQ

JJJ

HHH

GGG

LLL

这次顺序终于对了,oh yeah~,和我们之前的界面垂直顺序一致

bc6ac9a802368e6392e9f9190c5c6fd9.png

完整代码

下面给出完整代码

/**

* Class Test

* @author chenqionghe

*/

class Test

{

public function run()

{

$topNodeJson = '{"id":348019,"name":"AAA","is_leaf":2,"parent_id":347234,"type":0,"order":["348020"]}';

$childrenJson = '[{"id":348020,"name":"BBB","is_leaf":2,"parent_id":348019,"type":0,"order":["348037","348033","348021","348023","348034"]},{"id":348021,"name":"CCC","is_leaf":2,"parent_id":348020,"type":0,"order":["348022","348035"]},{"id":348022,"name":"DDD","is_leaf":2,"parent_id":348021,"type":0,"order":["348024","348032","348030"]},{"id":348024,"name":"EEE","is_leaf":2,"parent_id":348022,"type":0,"order":["348025","348036"]},{"id":348025,"name":"FFF","is_leaf":2,"parent_id":348024,"type":0,"order":["348031"]},{"id":348030,"name":"HHH","is_leaf":1,"parent_id":348022,"type":11,"order":[]},{"id":348023,"name":"GGG","is_leaf":1,"parent_id":348020,"type":11,"order":[]},{"id":348031,"name":"QQQ","is_leaf":1,"parent_id":348025,"type":11,"order":[]},{"id":348032,"name":"JJJ","is_leaf":1,"parent_id":348022,"type":11,"order":[]},{"id":348035,"name":"MMMu65e0u53f6u5b50","is_leaf":2,"parent_id":348021,"type":0,"order":[]},{"id":348036,"name":"NNNu65e0u53f6u5b50","is_leaf":2,"parent_id":348024,"type":0,"order":[]},{"id":348033,"name":"KKK","is_leaf":1,"parent_id":348020,"type":11,"order":[]},{"id":348037,"name":"OOO","is_leaf":2,"parent_id":348020,"type":0,"order":[]},{"id":348034,"name":"LLL","is_leaf":1,"parent_id":348020,"type":11,"order":[]}]';

$topNode = json_decode($topNodeJson, true);

$childrenList = json_decode($childrenJson, true);

$topNode['children'] = $this->getTree($childrenList, $topNode);

$getAllLeafs = $this->dfsFindLeafs($topNode);

echo json_encode($getAllLeafs);

}

/**

* 递归构造无限级树

*

* @param $list

* @param $node

* @return array

*/

private function getTree($list, $node)

{

$tree = [];

foreach ($list as $k => $v) {

if ($v['parent_id'] == $node['id']) {

$v['children'] = $this->getTree($list, $v);

$tree[] = $v;

}

}

if (empty($node['order'])) {

return [];

}

//注意:为了保证所有的叶子节点是根据已有的order排序,这里我们重新摆放一下

$treeMap = [];

foreach ($tree as $v) {

$treeMap[$v['id']] = $v;//建立id和数据的map

}

//根据order重新排序

$orderTree = [];

foreach ($node['order'] as $id) {//根据order的顺序重新摆放

$orderTree[] = $treeMap[$id];

}

return $orderTree;

}

/**

* 广度优先遍历获取所有叶子

* @param $node

* @return array

*/

private function bfsFindLeafs($node)

{

$result = [];//满足条件的组合

$q = [];

$q[] = $node;

while (count($q) > 0) {

$size = count($q);

for ($i = 0; $i < $size; $i++) {

$current = array_pop($q);

//判断节点如果是满足条件,加入路径

if ($current['is_leaf'] == 1) {

$result[] = $current;

}

//把所有的子节点加入队列

foreach ($current['children'] as $v) {

$q[] = $v;

}

}

}

return $result;

}

/**

* 获取所有的叶子路径(深度度优先遍历)

*/

private function dfsFindLeafs($node)

{

$trackList = [];

foreach ($node['children'] as $v) {

if ($v['is_leaf'] == 1) {

$trackList[] = $v;

}

if (empty($v['children'])) {

continue;

}

$trackList = array_merge($trackList, $this->dfsFindLeafs($v));

}

return $trackList;

}

}

(new Test())->run();

ok,到这里我们就已经学会如何构造无限级树型结构,并学会用深度优先遍历垂直输出指定条件节点,还知道了怎么用广度优先遍历,giao~

程序员灯塔

转载请注明原文链接:无限级树构造并遍历输出指定条件叶子

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值