Php无限层级并显示层级数
今天在处理递归无限层级菜单时，遇到一个稍微烧脑的问题，如何显示当前节点所在的层级数。
废话不多说，我们先看个直观的无限层级：
<?php
// 这里的arr是直接从数据库取出的，仅作为测试数据
$arr = array(
array('id' => 1, 'name' => '一级菜单a', 'pid' => 0),// pid 父级id
array('id' => 2, 'name' => '一级菜单b', 'pid' => 0),
array('id' => 3, 'name' => '二级菜单a', 'pid' => 1),
array('id' => 4, 'name' => '二级菜单b', 'pid' => 1),
array('id' => 5, 'name' => '二级菜单c', 'pid' => 2),
array('id' => 6, 'name' => '二级菜单d', 'pid' => 2),
array('id' => 7, 'name' => '三级菜单a', 'pid' => 3),
array('id' => 8, 'name' => '三级菜单b', 'pid' => 3),
array('id' => 9, 'name' => '四级菜单a', 'pid' => 8),
); /** 获取所有子节点
* @param $data 所有节点数组
* @param $id $pid 父级节点id
* @param $level 层级
* @return array
*/
function getTree($data, $pid, $level = 0)
{
$list = array();
foreach ($data as $k => $v) {
if ($v['pid'] == $pid) {
$v['level'] = $level;
$v['name'] = $v['name'].'('.($level+1).'级)'; // 这里可以加个层级次数
$v['children'] = getTree($data, $v['id'], $level + 1);
if ($v['children'] == null){
unset($v['children']);
}
$list[] = $v;
}
}
return $list;
} $menu = getTree($arr, 0, 0); $json = json_encode($menu);
?>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style>
*{
box-sizing: border-box;
margin: 0;padding: 0;
}
*:before,*:after{
box-sizing: border-box;
}
ul,
li {
list-style: none;
} .l_tree_container {
width: 100%;
height: 100%;
box-shadow: 0 0 3px #ccc;
margin: 13px;
position: relative;
} .l_tree {
width: calc(100% - 44px);
height: 100%;
padding-left: 42px;
}
.l_tree_branch {
width: 100%;
height: 100%;
display: block;
padding: 13px;
position: relative;
} .l_tree_branch .l_tree_children_btn {
width: 19px;
height: 19px;
background-color: #23b1f0;
font-size: 14px;
text-align: center;
color: #ffffff;
outline: none;
border: 0;
cursor: pointer;
} ul.l_tree:before {
content: '';
border-left: 1px dashed #999999;
height: calc(100%);
position: absolute;
left: 10px;
top: 0px;
} .l_tree .l_tree_branch:last-child::before {
content: '';
width: 3px;
height: calc(100% - 24px);
display: block;
background-color: #ffffff;
position: absolute;
bottom: 0;
left: -34px;
} .l_tree,
.l_tree_branch {
position: relative;
} .l_tree_branch::after {
content: '';
width: 40px;
height: 0;
border-bottom: 1px dashed #000;
position: absolute;
right: calc(100% - 9px);
top: 22px;
} .l_tree_container>.l_tree::before,
.l_tree_container>.l_tree>.l_tree_branch::after {
display: none;
}
</style>
</head> <body> <div id="demo">
<div class="l_tree_container">
<ew-tree :model="testdata"></ew-tree>
</div>
</div> <script>
// 树组件
Vue.component('ew-tree', {
template: `
<ul class="l_tree">
<li class="l_tree_branch" v-for="item in model" :key="item.id">
<div class="l_tree_click">
<button type="button" class="l_tree_children_btn" v-if="item.children" @click="toggle(item)">{{ !item.show ? '-' : '+' }}</button>
<span class="l_folder">{{ item.name }}</span>
</div>
<ew-tree v-show="!item.show" v-if="item.children" :model="item.children"></ew-tree>
</li>
</ul>`,
props: {
model: {}
},
methods: {
toggle: function (item) {
var idx = this.model.indexOf(item)
Vue.set(this.model[idx], 'show', !item.show)
}
}
});
new Vue({
el: "#demo",
data() {
return {
testdata: <?php echo $json?>
}
}
})
</script> </body>
</html>
我们看到所有节点层级数没问题，那么我如何查看节点中pid=3的所有节点层级关系呢
$menu = getTree($arr, 3, 0);
显然不对，况且菜单展示并不友好，pid=3的父节点至少要显示在顶层吧。层级数暂且不管，我们先解决如何显示顶层pid=3的树形结构：
pid=3对应的节点是：二级菜单a。这个可以直接根据数据id查询出来，此处仅做演示哈。调整下代码：
$menu = getTree($arr, 3, 0);
$menu = array(['name' => '二级菜单a','children'=> $menu]);
$json = json_encode($menu);
OK，完美，同样要显示所有pid=1的节点层级关系，一样，pid=1对应的节点是 一级菜单a
$menu = getTree($arr, 1, 0);
$menu = array(['name' => '一级菜单a','children'=> $menu]);
$json = json_encode($menu);
好，回到 刚才的话题，如何正确的显示每个节点所在的层级数呢？ 这里我也思考了很久，也没找到快捷的方法。
最终我还是递归的查询本节点所有的父节点id集合：完整代码如下：
<?php
// 这里的arr是直接从数据库取出的，仅作为测试数据
$arr = array(
array('id' => 1, 'name' => '一级菜单a', 'pid' => 0),// pid 父级id
array('id' => 2, 'name' => '一级菜单b', 'pid' => 0),
array('id' => 3, 'name' => '二级菜单a', 'pid' => 1),
array('id' => 4, 'name' => '二级菜单b', 'pid' => 1),
array('id' => 5, 'name' => '二级菜单c', 'pid' => 2),
array('id' => 6, 'name' => '二级菜单d', 'pid' => 2),
array('id' => 7, 'name' => '三级菜单a', 'pid' => 3),
array('id' => 8, 'name' => '三级菜单b', 'pid' => 3),
array('id' => 9, 'name' => '四级菜单a', 'pid' => 8),
); /** 获取所有子节点
* @param $data 所有节点数组
* @param $id $pid 父级节点id
* @param $level 层级
* @return array
*/
function getTree($data, $pid, $level = 0)
{
$list = array();
foreach ($data as $k => $v) {
if ($v['pid'] == $pid) {
$v['level'] = $level;
$v['name'] = $v['name'] . '(' . ($level + 1) . '级)'; // 这里可以加个层级次数
$v['children'] = getTree($data, $v['id'], $level + 1);
if ($v['children'] == null) {
unset($v['children']);
}
$list[] = $v;
}
}
return $list;
} /** 根据子节点获取父节点id
* @param $data 所有节点数组
* @param $id id 主键id
* @return array
*/
function getParentid($data, $id)
{
$arr = array();
foreach ($data as $v) {
if ($v['id'] == $id) {
$arr[] = $v;
//$arr[$v['id']]=$v['name'];
$arr = array_merge(getParentid($data, $v['pid']), $arr);
}
}
return $arr; } $id = 8 ; // 对应的节点是: 三级菜单b 对应的pid 是 3
$pid = 3; // 对应的节点是 二级菜单a $toparr = getParentid($arr, $id); // 节点为8的所有父节点 id: 1 3 8 这里包含了自身，注意剔除 $level = count($toparr); // 节点所在的层级数
$menu = getTree($arr, $pid, $level-1);
if($pid)
$menu = array(['name' => '二级菜单a' . '(' . ($level-1) . '级)', 'children' => $menu]); $json = json_encode($menu);
?>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
} *:before, *:after {
box-sizing: border-box;
} ul,
li {
list-style: none;
} .l_tree_container {
width: 100%;
height: 100%;
box-shadow: 0 0 3px #ccc;
margin: 13px;
position: relative;
} .l_tree {
width: calc(100% - 44px);
height: 100%;
padding-left: 42px;
} .l_tree_branch {
width: 100%;
height: 100%;
display: block;
padding: 13px;
position: relative;
} .l_tree_branch .l_tree_children_btn {
width: 19px;
height: 19px;
background-color: #23b1f0;
font-size: 14px;
text-align: center;
color: #ffffff;
outline: none;
border: 0;
cursor: pointer;
} ul.l_tree:before {
content: '';
border-left: 1px dashed #999999;
height: calc(100%);
position: absolute;
left: 10px;
top: 0px;
} .l_tree .l_tree_branch:last-child::before {
content: '';
width: 3px;
height: calc(100% - 24px);
display: block;
background-color: #ffffff;
position: absolute;
bottom: 0;
left: -34px;
} .l_tree,
.l_tree_branch {
position: relative;
} .l_tree_branch::after {
content: '';
width: 40px;
height: 0;
border-bottom: 1px dashed #000;
position: absolute;
right: calc(100% - 9px);
top: 22px;
} .l_tree_container > .l_tree::before,
.l_tree_container > .l_tree > .l_tree_branch::after {
display: none;
}
</style>
</head> <body> <div id="demo">
<div class="l_tree_container">
<ew-tree :model="testdata"></ew-tree>
</div>
</div> <script>
// 树组件
Vue.component('ew-tree', {
template: `
<ul class="l_tree">
<li class="l_tree_branch" v-for="item in model" :key="item.id">
<div class="l_tree_click">
<button type="button" class="l_tree_children_btn" v-if="item.children" @click="toggle(item)">{{ !item.show ? '-' : '+' }}</button>
<span class="l_folder">{{ item.name }}</span>
</div>
<ew-tree v-show="!item.show" v-if="item.children" :model="item.children"></ew-tree>
</li>
</ul>`,
props: {
model: {}
},
methods: {
toggle: function (item) {
var idx = this.model.indexOf(item)
Vue.set(this.model[idx], 'show', !item.show)
}
}
});
new Vue({
el: "#demo",
data() {
return {
testdata: <?php echo $json?>
}
}
})
</script> </body>
</html>
同样要显示所有节点：直接把pid赋值0，比如：
$id = 2 ; // 对应的节点是: 一级菜单b 对应的pid 是 0
$pid = 0; // 对应的节点是 0 为 一级节点 显示所有节点，上面的$id用不到 $toparr = getParentid($arr, $id); // $level = count($toparr); // 节点所在的层级数
$menu = getTree($arr, $pid, $level-1);
if($pid)
$menu = array(['name' => '二级菜单a' . '(' . ($level-1) . '级)', 'children' => $menu]); $json = json_encode($menu);
看起来没毛病，博友们如果有好的办法获取任意一个节点所处的层级数，欢迎拍砖留言哈。
Php无限层级并显示层级数的更多相关文章
- js treeData 树形数据结构 无限层级(转载)
js实现无限层级树形数据结构(创新算法) 转载:https://blog.csdn.net/Mr_JavaScript/article/details/82817177 由于做项目的需要,把一个线性数 ...
- 简单叨叨bootstrap按钮无限层级下拉菜单的实现
0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...
- django 无限层级的评论
一.摘要 拓展 django 官方的评论库,为评论提供无限层级的支持. 二.demo演示 访问链接: https://github.com/zmrenwu/django-mptt-comments 下 ...
- java中实现无限层级的树形结构
本文展示了两个实现方法的代码.两个代码的实现方法不同,代码2更为简单. 先看一下最后实现的结果: 最后结果-json 代码1: 实现过程: 1.传入一段json字符串 2.将字符串转换成对象存入节点列 ...
- Android上的MVP：如何组织显示层的内容
MVP(Model View Presenter)模式是著名的MVC(Model View Controller)模式的一个演化版本,目前它在Android应用开发中越来越重要了,大家也都在讨论关于M ...
- Jquery实现鼠标移到某个对象，弹出显示层。
/** * 鼠标移上去显示层 * @param divId 显示的层ID * @returns */ $.fn.myHoverTip = function(divId) { var div = $(& ...
- SQL查询无限层级结构的所有下级，所有上级
无限层级结构的table1表,Id(主键),ParentId(父级id)查询某个Id的所有下级或所有上级,使用WITH AS,UNION ALL 查询 1.查询Id为1所有的下级 WITH T AS( ...
- 系统管理模块_部门管理_改进_抽取添加与修改JSP页面中的公共代码_在显示层抽取BaseAction_合并Service层与Dao层
系统管理模块_部门管理_改进1:抽取添加与修改JSP页面中的公共代码 commons.jspf <%@ page language="java" import="j ...
- MVC框架显示层——Velocity技术
Velocity,名称字面翻译为:速度.速率.迅速,用在Web开发里,用过的人可能不多,大都基本知道和在使用Struts,到底Velocity和Struts(Taglib和Tiles)是如何联系?在技 ...
随机推荐
- hdoj-1016-Prime Ring Problem【深搜】
Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- WIN10 10招
还有不到两个月的时间,7 月 29 日 Windows 10 就将正式公布,在此之前已经有不少的用户已经使用上了 Windows 10 的预览版.对于那些苦等 Windows 10 的用户来说,幸福非 ...
- XML与JSON的区别?各自有哪些优缺点?
JSON和XML都是数据传输格式,它们有哪些区别,又都有些什么优缺点呢?零度带领大家来分析分析. 一.先来看看两者的定义 1.XML的定义 扩展标记语言 (Extensible Markup Lang ...
- 通过PXE安装Linux实况
通过PXE安装Linux实况 网卡引导操作系统的过程我们可以把它称为PXE(Pre-bootExecutionEnvironment),十几年前,在搞无盘NT时候,我们为了使网卡支持PXE引导要特意购 ...
- 微信小程序---app.json中设置背景色不生效解决办法
按照官方文档的说明,backgroundColor应该可以设置窗口的背景色. "window":{ "backgroundTextStyle":"li ...
- 【Pycharm】【HTML】注释问题
学习HTML中,遇到的注释前存在空行的问题: 只要找到Pycharm设置中:勾选去掉即可
- pycharm不显示工具栏，自动导入模块，格式化代码快捷键
我们需修改View里面的Toolbar,在前面打上沟,然后就可以显示了 自动导入模块设置:import numpy as np 我们需用鼠标选中numpy,然后在键盘上同时按住Alt+Enter键,通 ...
- 关于XAMPP安装后APACH无法启动的问题
Xampp的获得和安装都十分简单,你仅仅要到下面网址: http://www.apachefriends.org/zh_cn/xampp.html 下载xampp就可以.我安装的是windows版本号 ...
- home.pl 正在促销，一些域名免费（终止于2017.4.4）
home.pl 正在促销,一些域名免费(终止于2017.4.4) home.pl 成立于1997年,是波兰顶尖的互联网服务公司.专注于域名登记,托管网站,保持电子邮件帐户等. home.pl 正在促 ...
- 阿姆达尔定律（Amdahl's law）
首先给出阿姆达尔定律的数学公式描述: S(N)=1(1−p)+pN p:程序中可并行部分的程序在单核上执行时间的占比: N:处理器的数目(总的核心数) S(N):程序在 N 个处理器(总核心数)相对在 ...