0

我正在尝试将我从可嵌套插件中获得的多维数组提取到Ordered List插件的HTML结构中。

我建立的递归是不够的，因为我正在创建的标签在有孩子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>

Array这是我从 DB 获得的一个示例：

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>
4

1 回答 1

1

您必须正确打开和关闭标签。

用这个：

$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/

于 2013-10-15T10:12:25.283 回答