2013-10-15 1 views
0

Nestable Plugin에서 Ordered List으로 가져온 다차원 배열을 Plugin의 HTML 구조로 추출하려고합니다.다중 배열을 중첩 된 목록으로 추출

제가 작성한 OL 태그가 아이들을 가지고있는 태그이므로 빌드 한 재귀가 충분하지 않습니다. 언뜻보기에 그것은 쉬운 일처럼 보였지만, 나는 그것을 완료하지 못했습니다.

내가 지금까지 쓴 한 것입니다, 나는 버튼과 손잡이, 나는 재귀에서 다음 루프가 아이를 가지고있는 LI 있는지 확인 않으므로 OL 안에 얼마나 이해하지 못할 div.

<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의 예입니다
이 내 함수의 출력은

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); 
     } 
    } 
} 

(플러그인의 HTML 구조의 예를 아래에 볼 수 있습니다) 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 
     ) 

) 

이 당신은 제대로 가까운 태그를 열고해야

<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

: 올바른 플러그인의 HTML 구조의 예이다.

사용이 :

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