2013-10-15 49 views
0

我試圖通過插件的HTML結構將我從Nestable Plugin獲得的多維數組抽取爲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> 

這是一個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> 

回答

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 Live demo

請注意,我漂亮地打印上的現場演示,一點點以上。

下面是生成的嵌套列表的簡單示例:http://jsfiddle.net/YDnd8/