Wie genested Navigationsmenü aus der Datenbank

Question

generieren Ich habe die Seiten meiner Website in einer Datenbank gespeichert. Mit Laravel (obwohl das für meine Frage nicht wirklich wichtig ist) kann ich die Hierarchie der Site ausgeben und folgendes sehen. (Ich habe die Flexibilität, die Datenbankstruktur zu ändern und mehr Spalten hinzufügen, wenn erforderlich)

[ 
    { 
     "ref_id": "1", 
     "parent_id": "0", 
     "name": "Item 1", 
     "child_count": 0 
    }, 
    { 
     "ref_id": "2", 
     "parent_id": "0", 
     "name": "Item 2", 
     "child_count": 2 
    }, 
    { 
     "ref_id": "3", 
     "parent_id": "2", 
     "name": "Item 2 Sub 1", 
     "child_count": 0 
    }, 
    { 
     "ref_id": "4", 
     "parent_id": "2", 
     "name": "Item 2 Sub 2", 
     "child_count": 0 
    }, 
    { 
     "ref_id": "5", 
     "parent_id": "0", 
     "name": "Item 3", 
     "child_count": 2 
    }, 
    { 
     "ref_id": "6", 
     "parent_id": "5", 
     "name": "Item 3 Sub 1", 
     "child_count": 0 
    }, 
    { 
     "ref_id": "7", 
     "parent_id": "5", 
     "name": "Item 3 Sub 2", 
     "child_count": 0 
    }, 
    { 
     "ref_id": "12", 
     "parent_id": "0", 
     "name": "Item 4", 
     "child_count": 0 
    }, 
    { 
     "ref_id": "13", 
     "parent_id": "0", 
     "name": "Item 5", 
     "child_count": 3 
    }, 
    { 
     "ref_id": "14", 
     "parent_id": "13", 
     "name": "Item 5 Sub 1", 
     "child_count": 0 
    }, 
    { 
     "ref_id": "15", 
     "parent_id": "13", 
     "name": "Item 5 Sub 2", 
     "child_count": 2 
    }, 
    { 
     "ref_id": "16", 
     "parent_id": "15", 
     "name": "Item 5 Sub 2 SubSub 1", 
     "child_count": 0 
    }, 
    { 
     "ref_id": "17", 
     "parent_id": "15", 
     "name": "Item 5 Sub 2 SubSub 2", 
     "child_count": 0 
    }, 
    { 
     "ref_id": "18", 
     "parent_id": "13", 
     "name": "Item 5 Sub 3", 
     "child_count": 0 
    }, 
    { 
     "ref_id": "19", 
     "parent_id": "0", 
     "name": "Item 6", 
     "child_count": 0 
    } 
] 

ich durch diesen Knoten und Ausgang eine verschachtelte UL-Navigation iterieren muß, die wie folgt aussieht. Die ULs könnten mehrere Ebenen tief verschachtelt sein, so dass der Code dynamisch sein muss.

<ul> 
    <li>Item 1</li> 
    <li>Item 2 
     <ul> 
      <li>Item 2 Sub 1</li> 
      <li>Item 2 Sub 2</li> 
     </ul> 
    </li> 
    <li>Item 3 
     <ul> 
      <li>Item 3 Sub 1</li> 
      <li>Item 3 Sub 2</li> 
     </ul> 
    </li> 
    <li>Item 4</li> 
    <li>Item 5 
     <ul> 
      <li>Item 5 Sub 1</li> 
      <li>Item 5 Sub 2 
       <ul> 
        <li>Item 5 Sub 2 SubSub 1</li> 
        <li>Item 5 Sub 2 SubSub 2</li> 
       </ul> 
      </li> 
      <li>Item 5 Sub 3</li> 
     </ul> 
    </li> 
    <li>Item 6</li> 
</ul> 

Was ich bis jetzt gemacht habe, ist ziemlich nah. Das ist im Moment so gut wie es geht. Das ist Laravels Blade-Syntax, aber es ist die Logik, nach der ich suche, also gilt dies auch für Vanille-PHP.

<ul> 
    @php 
     $child_count = 0; 
     $total_children = 0; 
    @endphp 
    @foreach($q_list as $row) 
     @if($total_children) 
      @php $child_count++; @endphp 
     @endif 
     <li>{{ $row->name }} 
      @if($row->child_count) 
       @php 
        $total_children = $row->child_count; 
        $child_count = 0; 
       @endphp 
       <ul> 
      @elseif($total_children == $child_count && $total_children != 0) 
       @php 
        $total_children = 0; 
        $child_count = 0; 
       @endphp 
       </ul> 
      @endif 
     @if($total_children == $child_count || $row->child_count == 0) 
      </li> 
     @endif 
    @endforeach 
</ul> 

Daraus ergibt sich:

<ul> 
    <li>Item 1</li> 
    <li>Item 2 
     <ul> 
      <li>Item 2 Sub 1</li> 
      <li>Item 2 Sub 2 
     </ul> 
    </li> 
    <li>Item 3 
     <ul> 
      <li>Item 3 Sub 1</li> 
      <li>Item 3 Sub 2 
     </ul> 
    </li> 
    <li>Item 4</li> 
    <li>Item 5 
     <ul> 
      <li>Item 5 Sub 1</li> 
      <li>Item 5 Sub 2 
       <ul> 
        <li>Item 5 Sub 2 SubSub 1</li> 
        <li>Item 5 Sub 2 SubSub 2 
       </ul> 
      </li> 
      <li>Item 5 Sub 3</li> 
      <li>Item 6</li> 
</ol> 

denke ich das Skript sehr chaotisch ist, aber noch wichtiger ist, gibt es zwei Probleme. Erstens, das letzte Element jedes verschachtelten ULs hat das schließende </li> weggelassen. Zweitens wird jedes verschachtelte <ul> nur einmal geschlossen. Das ist in Ordnung, wenn das verschachtelte <ul> nur auf Level zwei liegt, aber jedes größere (wie Element 5 Sub 2 SubSub *) nicht genug abschließende <li></ul> Tags hat, was dazu führt, dass Element 6 auf dem falschen Level ist. (d. h. ist immer noch ein Kind von Punkt 5)

Kann jemand helfen, die Lücken zu füllen oder mich über einen besseren Weg zu informieren, dies zu erreichen. Danke

Answer 1

Sie können Rekursion Logik implementieren.

einen Helfer

function generate_tree($categories) 
{ 
    foreach ($categories as $category) { 
     echo '<li id="categoryId_' . $category->id . '">'; 
     echo $category->name; 
     if ($category->children) { 
      echo '<ul>'; 
      generate_tree($category->children); 
      echo '</ul>'; 
     } 
     echo '</li>'; 
    } 
} 

Zu sehen

<ul> 
    {!! generate_tree($categories) !!} 
</ul>