2017-07-09 17 views
0

私は自分のウェブサイトのページをデータベースに保存しています。 Laravelを使用して(それは私の質問にとっては本当に重要ではありませんが)、私はサイトの階層を出力し、以下を参照することができます。 (私は、データベースの構造を変更し、必要に応じて複数の列を追加するための柔軟性を持っている)データベースからネストされたナビゲーションメニューを生成する方法

[ 
    { 
     "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 
    } 
] 

私は、これらのノードと出力を通じて次のようになり、ネストされたULナビゲーションを反復処理する必要があります。 ULは、コードが動的でなければならないように、いくつかの層を深くネストすることができます。

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

私がこれまで行ってきたことは、かなり近いです。これは現時点で得られるほど良いものです。これはLaravelのブレード構文ですが、これは私が後にしているロジックですので、これもvanilla 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> 

これは、その結果:

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

私はスクリプトは非常に厄介であると思いますが、もっと重要なのは、二つの問題がここにあります。まず、ネストされた各ULの最後の項目には、</li>が省略されています。第2に、各ネストされた<ul>は1回だけ閉じられます。ネストされた<ul>がレベル2にしか存在しないが、より大きい(アイテム5サブ2サブサブ*のような)大きいアイテムが閉じて<li></ul>タグを持たない場合、アイテム6が間違ったレベルになる。 (つまり、商品5の子です)

誰でも空白を記入するか、これを達成するためのよりよい方法を教えてください。ありがとう

+0

でヘルパー

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

を作成します。 – Phiter

答えて

1

再帰ロジックを実装することができます。

は、あなたが深い無限に行きたい場合は、再帰をする必要がありますビュー

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

ありがとうございます。しかし、すでにデータをネストする必要はありませんか?どのように私のデータ構造(私の元の投稿の最初のコードブロック)でこれを使用することができます – Typhoon101

+0

一度このhttps://github.com/lazychaser/laravel-nestedsetパッケージをチェックするか、単にlaravel関係を使用してください。彼らはネストされた構造であなたのデータを私のようにします。 –

+0

Hmmm。興味深いですね。これについて私の頭を浮かべるために読んだことがあるかもしれないと思う。ご協力いただきありがとうございます。 – Typhoon101

関連する問題