我正在尝试将我从Nestable插件获得的多维数组提取到插件HTML
结构的Ordered List
中。
我构建的递归是不够的,因为我正在创建的OL
标签不在生孩子的LI
之外。乍一看,这似乎是一件容易的事,但我未能完成它。
这是我到目前为止写的,我不明白如何检查递归中的下一个循环是否是有孩子的LI
,所以OL
将在里面,按钮和句柄div
.
(插件的HTML结构示例如下)
function buildNestedList($a) {
if (!is_array($a)) {
echo ('<li class="dd-item" data-name="'.$a.'"><div class="dd-handle">'.$a.'</div></li>');
return;
}
foreach($a as $k => $v) {
if(($k=="children")&&(is_string($k))) {
echo ('<ol class="dd-list">');
buildNestedList($v);
echo ("</ol></li>");
}
else {
printAll($v);
}
}
}
这是我的函数的输出:
<div class="dd" id="nestable">
<ol class="dd-list">
<li class="dd-item" data-name="item 1">
<div class="dd-handle">item 1</div>
</li>
<li class="dd-item" data-name="item 2">
<div class="dd-handle">item 2</div>
</li>
<li class="dd-item" data-name="item 3">
<div class="dd-handle">item 3</div>
</li>
<ol class="dd-list">
<li class="dd-item" data-name="item 4">
<div class="dd-handle">item 4</div>
</li>
<li class="dd-item" data-name="item 5">
<div class="dd-handle">item 5</div>
</li>
<li class="dd-item" data-name="item 6">
<div class="dd-handle">item 6</div>
</li>
<ol class="dd-list">
<li class="dd-item" data-name="item 7">
<div class="dd-handle">item 7</div>
</li>
<li class="dd-item" data-name="item 8">
<div class="dd-handle">item 8</div>
</li>
</ol>
</ol>
<li class="dd-item" data-name="item 9">
<div class="dd-handle">item 9</div>
</li>
<li class="dd-item" data-name="item 10">
<div class="dd-handle">item 10</div>
</li>
<li class="dd-item" data-name="item 11">
<div class="dd-handle">item 11</div>
</li>
</ol>
</div>
这是我从DB获得的Array
的示例:
Array
(
[0] => Array
(
[name] => item 1
)
[1] => Array
(
[name] => item 2
)
[2] => Array
(
[name] => item 3
[children] => Array
(
[0] => Array
(
[name] => item 4
)
[1] => Array
(
[name] => item 5
)
[2] => Array
(
[name] => item 6
[children] => Array
(
[0] => Array
(
[name] => item 7
)
[1] => Array
(
[name] => item 8
)
)
)
)
)
[3] => Array
(
[name] => item 9
)
[4] => Array
(
[name] => item 10
)
[5] => Array
(
[name] => item 11
)
)
这是正确的插件HTML
结构示例:
<ol class="dd-list">
<li class="dd-item" data-name="item 1">
<div class="dd-handle">item 1</div>
</li>
<li class="dd-item" data-name="item 2">
<button data-action="collapse" type="button">Collapse</button><button data-action="expand" type="button" style="display: none;">Expand</button>
<div class="dd-handle">item 2</div>
<ol class="dd-list">
<li class="dd-item" data-name="item 3">
<div class="dd-handle">item 3</div>
</li>
<li class="dd-item" data-name="item 4">
<div class="dd-handle">item 4</div>
</li>
<li class="dd-item" data-name="item 5">
<div class="dd-handle">item 5</div>
</li>
</ol>
</li>
<li class="dd-item" data-name="item 6">
<button data-action="collapse" type="button">Collapse</button><button data-action="expand" type="button" style="display: none;">Expand</button>
<div class="dd-handle">item 6</div>
<ol class="dd-list">
<li class="dd-item" data-name="item 7">
<button data-action="collapse" type="button">Collapse</button><button data-action="expand" type="button" style="display: none;">Expand</button>
<div class="dd-handle">item 7</div>
<ol class="dd-list">
<li class="dd-item" data-name="item 8">
<div class="dd-handle">item 8</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>
您必须正确打开和关闭标签。
使用这个:
$source=json_decode('[{"name":"item 1"},{"name":"item 2"},{"name":"item 3","children":[{"name":"item 4"},{"name":"item 5"},{"name":"item 6","children":[{"name":"item 7"},{"name":"item 8"}]}]},{"name":"item 9"},{"name":"item 10"},{"name":"item 11"}]',true);
function buildNestedList(array $a)
{
if(empty($a["name"]))
{
echo "<ol>";
foreach($a as $item)
{
buildNestedList($item);
}
echo "</ol>";
}
else
{
echo "<li><div>".$a["name"]."</div>";
if(!empty($a["children"]))
{
buildNestedList($a["children"]);
}
echo "</li>";
}
}
buildNestedList($source);
PHP现场演示
请注意,我在上面的现场演示中漂亮地打印了一点。
下面是生成的嵌套列表的简单示例:http://jsfiddle.net/YDnd8/