Problème d'affichage d'une arborescence dépliante (treeview) en PHP

Bonjour, je suis débutant en PHP, HTML, Javascript. Je suis actuellement en stage et on m'a demandé de réaliser une arborescence avec les menus dépliants avec des petits boutons + et -.

J'ai donc réaliser cette partie cependant j'ai un problème par rapport au temps de chargement de la page qui est très très long. Je récupère presque 100000 lignes et chaque ligne est composé d'une image associé à une fonction javascript pour les niveaux ayant un fils et d'un texte dans un tableau.


Voila à quoi ressemble un peu mon code

<div id=arbo1>
   <ul>
      <li><img src="mon image" onclick="expand"/><table><tr><td>mon id</td></tr></table>
      ......
      ....
      ..
   </ul>
</div>


<div id=arbo2>
   <ul>
      <li><table><tr><td>val col 1</td><td>val col 2</td><td>val col 3</td></tr></table>
      ......
      ....
      ..
   </ul>
</div>

Le premier div correspond a des identifiants et le second div correspond à des valeurs par rapports a l'dentifiant. Quand on click sur l'image (+/-) la fonction expand dépli/repli dans l'arbo 1 puis dans l'arbo 2.

Pouvez-vous me dire comment pourrais-je faire afin que ma page se charge plus rapidement ou un autre moyen de créer mon arborescence (treeview) svp.

Bonjour,

Il faut éviter de charger un contenu HTML aussi imposant. D'abord parce que le temps de génération de ton code HTML risque d'être un peu poussif côté serveur (à vérifier, et puis la mise en cache permet de régler ce problème). Ensuite parce que charger ce contenu HTML risque d'être assez long (temps d'attente fort ou simple impression de lenteur). Enfin parce que le navigateur devra parser ce contenu tentaculaire, construire l'arbre DOM qui correspond, et manipuler le DOM si tu utilises du JavaScript pour cela... et avec un contenu aussi imposant ça risque de bouffer de la RAM et du CPU avec entrain.

La solution consiste donc à charger le contenu progressivement. Tu peux générer des vues statiques de ton arborescence (où seul le contenu affiché est chargé), ce qui implique qu'à chaque clic pour dérouler (ou éventuellement enrouler) une branche correspondra une requête HTTP. Donc soit un rechargement de page, soit une requête Ajax et une manipulation du DOM pour appliquer le résultat de cette requête.

Tu peux aussi, pour une meilleure réactivité de ton interface, charger des éléments non montrés par défaut. Par exemple, tu peux charger les contenus des niveaux 1 et 2 de ton arborescence, et afficher le niveau 1 uniquement. Lors du clic pour l'affichage d'une branche de niveau 2, il te suffit de faire un display:block sur l'élément qui correspond à cette branche (un DIV ou un UL par exemple). Mais lorsque l'utilisateur veut descendre encore d'un niveau, problème: tu n'as pas le contenu dans la page. Soit tu fais une requête à ce moment là (rechargement de page ou Ajax), et il y aura une latence sensible... soit tu as prévu le coup, et lorsque l'utilisateur demande à voir une branche de niveau 2 tu fais en préventif une requête Ajax pour récupérer les sous-branches de la branche en question... tu stockes le résultat, et tu en affiche une partie si l'utilisateur descend dans l'arborescence. Voilà une méthode pour être bien sioux et donne une impression de réactivité en préchargeant des contenus de manière sélective (en fonction du comportement possible de l'utilisateur). Mais j'ai peur que ça dépasse tes compétences, et peut-être les besoins exacts du projet.

faudet78 a écrit :
J'ai donc réaliser cette partie cependant j'ai un problème par rapport au temps de chargement de la page qui est très très long. Je récupère presque 100000 lignes et chaque ligne est composé d'une image associé à une fonction javascript pour les niveaux ayant un fils et d'un texte dans un tableau.

D'après mon calcul rapide le contenu (HTML) de la page doit peser entre 5 et 20 Mo.
Modifié par Florent V. (17 Jun 2009 - 17:35)

Merci de ta réponse, j'ai pensé aussi à cette méthode que tu me proposes à l'envoi de la requête au moment du clic pour récupérer les niveaux enfants mais je ne sais pas du tout comment faire. Quelqu'un pourrais me venir en aide ou aurais un exemple pour réaliser ce script svp ?