Page 1 sur 1

Liste imbriquée <ul> <li>

Posté : 28 juil. 2008, 17:41
par citronized
Bonjour,

Je bloque sur un problème d'imbrication de liste dont le code doit reprendre cette structure html (issue de www.dhtmlgoodies.com) :

Code : Tout sélectionner

<ul id="dhtmlgoodies_tree2" class="dhtmlgoodies_tree"> <li id="node0" noDrag="true" noSiblings="true" noDelete="true"><a href="#">Root node</a> <ul> <li id="node1"><a href="#">Europe</a> <ul> <li id="node2" noDelete="true"><a href="#">Norway</a> <ul> <li id="node3" noRename="true"><a href="#">Stavanger</a></li> <li id="node6"><a href="#">Bergen</a></li> <li id="node7"><a href="#">Oslo</a></li> </ul> </li> <li id="node8"><a href="#">United Kingdom</a> <ul> <li id="node9"><a href="#">London</a></li> <li id="node10"><a href="#">Manchester</a></li> </ul> </li> <li id="node12"><a href="#">Sweden</a></li> <li id="node13"><a href="#">Denmark</a></li> <li id="node14"><a href="#">Germany</a> <ul> <li id="node141"><a href="#">Berlin</a> <li id="node142"><a href="#">Munich</a> <li id="node143"><a href="#">Stuttgart</a> </ul> </li> </ul> </li>...
Comme je souhaiterais pouvoir sauvegarder/ajouter des nœuds, il faudrait que je génère ce code html via php, en piochant dans une base MySQL :)
J'ai actuellement une table 'nodes' avec les rubriques :
- ID int(11)
- title varchar(255)
- position int(11)
- parentID int(11) //ID du nœud parent
- arboID int(11) //ID de l'arbre

Jusqu'à présent, je ne suis pas trop rentré dans le détail du html, puisque j'ai déjà des erreurs au niveau de l'imbrication, dans mon fichier php :
    $select = 'SELECT ID, title, position, parentID, arboID FROM nodes ORDER BY ID, parentID';    
    $result = mysql_query($select,$link) or die ('Erreur : '.mysql_error() );
	$total = mysql_num_rows($result);

		if($total) {
			$catPrec = 0;

		    echo "<ul>\n";
		    while ($data = mysql_fetch_array($result)) {
		    	if ($data['parentID'] != $catPrec) {
		    		if ($catPrec != 0) {
				      echo "  </ul>\n";
				      echo " </li>\n";
				   }

				    echo " <li>";
				    echo $data['title']."\n";
				    echo "  <ul>\n";
				    $catPrec = $data['parentID'];
				  }

				  echo "   <li>";
				  echo $row['title'];
				  echo "</li>\n";
				}
				echo "  </ul>\n";
				echo " </li>\n";

				echo "</ul>\n";
		}
Je ne sais plus par quel bout prendre ce code pour arriver au résultat en html :(

Posté : 28 juil. 2008, 18:24
par Patriboom
Si je comprends bien ton problème, tu as du mal à fermer toutes les étages que tu as ouvertes, à ouvrir le bon nombre de niveaux.

Au début de chaque nouvel item, je prendrais dans une variable le niveau de l'item.
Comme tu fais déjà, je le comparerais avec le niveau précédent, mais avec un While plutôt qu'avec un IF.

Ainsi, tu pourrais avoir quelque chose comme:
$NivVirtuel = 0;
while ($data = mysql_fetch_array($result)) { 
   $CeNiveau = $data['Niveau'];
    if ($CeNiveau > $CatPrec) {
        WHILE ($NivVirtuel++ < $CeNiveau) {  //Pour monter d'étage
         echo "<ul>";
         $NivVirtuel = $NivVirtuel + 1;
     }
    } else if ($CeNiveau < $CatPrec) {
        WHILE ($NivVirtuel-- > $CeNiveau) {  //Pour descendre d'étage
         echo "<ul>";
         $NivVirtuel = $NivVirtuel - 1;
     }
  }

  echo "<li>".$row['title']."</li>";
}

while ($NivVirtuel > 0) {  //On ferme toutes les balises restantes
   echo "</ul>";
}

La variable $NivVirtuel sert ici à "savoir" à quel niveau t'es rendu.

Posté : 28 juil. 2008, 22:18
par Victor BRITO
Pour résumer de façon plus schématique et plus générale, si tu dois utiliser des boucles (for, foreach, while, do while) dans des listes imbriquées :
<!-- Ouverture d'une liste de niveau 1 -->
<ul>
<?php // Une première boucle ?>
  <li><?php // Des echo ou tout ce qui permet de générer de l'affichage sans boucle supplémentaire ?></li>
  <li>
    <!-- Ouverture d'une liste imbriquée (contenue dans un élément li) -->
    <ul>
<?php // Une deuxième boucle ?>
      <li><?php // Des echo ou tout ce qui permet de générer de l'affichage ?></li>
<?php // Fin de la deuxième boucle ?>
    <!-- Fermeture de la liste imbriquée -->
    </ul>
  </li>
<?php // Fin de la première boucle ?>
<!-- Fermeture de la liste de niveau 1 -->
</ul>

Posté : 29 juil. 2008, 08:51
par citronized
Merci à vous deux pour vos pistes ;)

J'ai testé la première solution, mais pour le moment j'ai une boucle infinie, donc j'ai une coquille quelque part. Merci pour le principe général, je vais essayer d'y coller.

Edit : En relisant le principe général que me propose Victor, je m'aperçois que j'ai dû mal exposer mon problème, puisque de ce que j'en comprends, ce principe s'applique si l'on connaît à l'avance le nombre de niveaux d'imbrication, ce qui n'est pas mon cas.
Donc la solution de Patriboom me paraît plus appropriée -de ce que j'en comprends :D - mais même après modification, continue de boucler à l'infini…

Je vais chercher une piste pour comprendre comment faire cette opération de façon récursive.

Re: Liste imbriquée <ul> <li>

Posté : 29 avr. 2012, 13:44
par jadu29
Il faut bien avoir en tête les imbrications !
#-o #-o #-o #-o

Code : Tout sélectionner

<h2>listesimbriquées</h2> <ul><!--Racine--> <li>Racine-contenu <ul><!--Niveau 1--> <li>Niveau 1-contenu <ul><!--Niveau 2--> <li>Niveau 2-contenu <ul><!--Niveau 3--> <li>Niveau 3-contenu <ul><!--Niveau 4--> <li>Niveau 4-contenu</li><!--fincontenuniveau 4--> <li>Niveau 4-contenu</li><!--fincontenuniveau 4--> <li>Niveau 4-contenu</li><!--fincontenuniveau 4--> </ul><!--finniveau 4--> </li><!--fincontenuniveau 3--> </ul><!--finniveau 3--> </li><!--fincontenuniveau 2--> <li>Niveau 2 <ul><!--Niveau 3--> <li>Niveau 3-contenu</li><!--fincontenuniveau 3--> <li>Niveau 3-contenu</li><!--fincontenuniveau 3--> <li>Niveau 3-contenu</li><!--fincontenuniveau 3--> </ul><!--finniveau 3--> </li><!--fincontenuniveau 2--> <li>Niveau 2-contenu</li><!--fincontenuniveau 2--> <li>Niveau 2-contenu</li><!--fincontenuniveau 2--> <li>Niveau 2 <ul><!--Niveau 3--> <li>Niveau 3-contenu</li><!--fincontenuniveau 3--> <li>Niveau 3-contenu</li><!--fincontenuniveau 3--> <li>Niveau 3-contenu</li><!--fincontenuniveau 3--> </ul><!--finniveau 3--> </li><!--fincontenuniveau 2--> </ul><!--finniveau 2--> </li><!--finniveau 1--> <li>Retour au niveau 1-contenu!</li> <!--fincontenuniveau 1--> <li>Retour au niveau 1-contenu!</li><!--fincontenuniveau 1--> </ul><!--finniveau 1--> </li><!--fincontenuracine--> </ul><!--finracine--> Reprise à la racine !
:D

Re: Liste imbriquée <ul> <li>

Posté : 29 avr. 2012, 13:47
par jadu29
Il faut bien avoir en tête les imbrications !
#-o #-o #-o #-o

Code : Tout sélectionner

<h2>listesimbriquées</h2> <ul><!--Racine--> <li>Racine-contenu <ul><!--Niveau 1--> <li>Niveau 1-contenu <ul><!--Niveau 2--> <li>Niveau 2-contenu <ul><!--Niveau 3--> <li>Niveau 3-contenu <ul><!--Niveau 4--> <li>Niveau 4-contenu</li><!--fincontenuniveau 4--> <li>Niveau 4-contenu</li><!--fincontenuniveau 4--> <li>Niveau 4-contenu</li><!--fincontenuniveau 4--> </ul><!--finniveau 4--> </li><!--fincontenuniveau 3--> </ul><!--finniveau 3--> </li><!--fincontenuniveau 2--> <li>Niveau 2 <ul><!--Niveau 3--> <li>Niveau 3-contenu</li><!--fincontenuniveau 3--> <li>Niveau 3-contenu</li><!--fincontenuniveau 3--> <li>Niveau 3-contenu</li><!--fincontenuniveau 3--> </ul><!--finniveau 3--> </li><!--fincontenuniveau 2--> <li>Niveau 2-contenu</li><!--fincontenuniveau 2--> <li>Niveau 2-contenu</li><!--fincontenuniveau 2--> <li>Niveau 2 <ul><!--Niveau 3--> <li>Niveau 3-contenu</li><!--fincontenuniveau 3--> <li>Niveau 3-contenu</li><!--fincontenuniveau 3--> <li>Niveau 3-contenu</li><!--fincontenuniveau 3--> </ul><!--finniveau 3--> </li><!--fincontenuniveau 2--> </ul><!--finniveau 2--> </li><!--finniveau 1--> <li>Retour au niveau 1-contenu!</li> <!--fincontenuniveau 1--> <li>Retour au niveau 1-contenu!</li><!--fincontenuniveau 1--> </ul><!--finniveau 1--> </li><!--fincontenuracine--> </ul><!--finracine--> Reprise à la racine !
:D

et alors, il n'y a pas de soucis !
Il faut et il suffit d'imbriquer le code php de la même façon !

CQFD
:lol: :lol: :lol: :lol: