[英]How to create a ul - li menu from a tree like array?
我有一個帶title
和children
索引的數組。
title
始終不為null。 children
是一個數組,空或非空。
任何children
都有title
和children
等等。
$myArray = [
0 => [
'title' => 'N1',
'children' =>
[
0 =>
[
'title' => 'N11',
'children' =>
[
0 =>
[
'title' => 'N111',
'children' => [],
],
],
],
],
],
1 =>
[
'title' => 'N2',
'children' =>
[
0 =>
[
'title' => 'N21',
'children' =>
[],
],
],
],
];
現在,我想用這個數組創建一個下拉菜單。
我有從這個數組創建無序列表( ul
, li
)的問題。
我希望我的結果如下:
<ul>
<li>N1
<ul>
<li>N11
<ul>
<li>N111</li>
</ul>
</li>
</ul>
</li>
<li>N2
<ul>
<li>N21</li>
</ul>
</li>
</ul>
我相信這會奏效:
function menu($arr) {
echo "<ul>";
foreach ($arr as $val) {
if (!empty($val['children'])) {
echo "<li>" . $val['title'];
menu($val['children']);
echo "</li>";
} else {
echo "<li>" . $val['title'] . "</li>";
}
}
echo "</ul>";
}
假設這是你的數組
$menu = array(
array(
'title'=>'N1',
'children'=>array(
'title'=>'N11',
'children'=>array(
'title'=>'N111',
'children'=>array(),
),
),
),
array(
'title'=>'N2',
'children'=>array(
'title'=>'N21',
'children'=>array(),
)
),
);
您可以使用遞歸來構建此HTML結構。
function createMenu($arr){
$str = '';
if(is_array($arr)){
$str .= "<li>".$arr['title'];
if(!empty($arr['children'])){
$str .="<ul>";
$str .= createMenu($arr['children'],$str);
$str .="</ul>";
}
$str .= "</li>";
}
return $str;
}
現在調用遞歸函數來創建HTML
$myMenu ='';
foreach($menu as $arr){
$myMenu .= createMenu($arr);
}
echo "<ul>".$myMenu."</ul>";
exit();
我必須實現類似的東西,但我希望HTML生成在一個twig模板中。 這看起來像這樣:
{% macro printMenuElements(nestedListElements, level = 0, parent = 'root') %}
<ul>
{% for nestedElement in nestedListElements %}
{% set children = nestedElement.children %}
{% set title = nestedElement.title %}
{% if children is not empty and children is iterable %}
<li data-parent="{{ parent }}">
{{ title }}
{{ _self.printMenuElements(children, level +1, title) }}
</li>
{% else %}
<li data-parent="{{ parent }}">
{{ title }}
</li>
{% endif %}
{% endfor %}
</ul>
{% endmacro %}
{% block body %}
<h1>Menu</h1>
{% import _self as helper %}
{{ helper.printMenuElements(yourArray) }}
{% endblock %}
這會生成以下HTML輸出:
<ul> <li data-parent="root"> N1 <ul> <li data-parent="N1"> N11 <ul> <li data-parent="N11"> N111 </li> </ul> </li> </ul> </li> <li data-parent="root"> N2 <ul> <li data-parent="N2"> N21 </li> </ul> </li> </ul>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.