2016-04-26 14 views
2

Ich bin Anfänger in Symfony 2. Ich habe ein Projekt und ich möchte einen dynamischen Baum mit CSS erstellen, dieser Baum wird meine Kategorien Ebenen anzeigen.Erstellen eines dynamischen Baumes in Symfony 2

Ich habe bereits versucht, es selbst zu tun, ich konnte die ersten 3 Ebenen meiner Kategorien mit 3 Schleifen anzeigen, aber andere Ebenen werden nicht angezeigt.

Ich möchte wissen, ob ich Rekursion oder eine andere Möglichkeit verwenden kann, um alle Kategorien als Baum anzuzeigen.

dies die Aktion-Methode i verwendet:

public function afficherArborescenceAction(){ 
    $em = $this->getDoctrine()->getManager(); 
    $categories = $em->getRepository('PortfolioBundle:Categorie')->findByCategorieParent(); 
    $sousCategories = $em->getRepository('PortfolioBundle:Categorie')->findSousCategories(); 
    return $this->render('AdministrateurBundle:NouvelleCategorie:showCategories.html.twig',array('categories'=>$categories,'sousCategories'=>$sousCategories)); 
} 

Das ist mein HTML-Code:

<div style="border:1px #999999 solid;border-radius: 5px;width:350px;margin: 100px auto;padding:10px;"> 
<p>Les catégories:</p> 
{% for categorie in categories %} 
    <ul class="tree"> 
     <li><a href="{{path('sous_categorie',{'id': categorie.id})}}">{{ categorie.libelle }}</a> 
      {% for sousCategorie in sousCategories %} 

       <ul> 
        {% if sousCategorie.categorieParent == categorie.id %} 
         <li> 
          <a href="{{path('sous_categorie',{'id': sousCategorie.id})}}">{{ sousCategorie.libelle }}</a> 
          {% for sous in sousCategories %}  
           {% if sous.categorieParent == sousCategorie.id %} 
            <ul> 
             <li> 
              <a href="{{path('sous_categorie',{'id': sous.id})}}">{{ sous.libelle }}</a> 
             </li> 
            </ul> 

           {% endif %} 
          {% endfor %} 
         </li> 
        {% endif %} 
       </ul> 

      {% endfor %} 
     </li> 
    </ul> 
{% endfor %} 

Dies ist der aktuelle Baum i über den Code erhalten, mit:

enter image description here

Antwort

Verwandte Themen