[PEAR] Réaliser un treeview en "pur" PHP

Version imprimable

01/03/2007, 11h46
mydev

[PEAR] Réaliser un treeview en "pur" PHP

Bonjour,
je souhaite réaliser un treeview (type arborescence de fichiers) en pur PHP, j'entends par là sans Javascript ; j'ai trouvé de multiples solutions comme par exemple http://phplayersmenu.sourceforge.net/ qui est cité sur le forum PHP général, mais il utilise comme bien d'autres Javascript. Je souhaite évidemmment éviter cette solution au cas où l'utilisateur désactiverait Javascript sur son navigateur. J'imagine qu'on peut qd même faire qque chose d'assez sympa visuellement en PHP + CSS (bien que ce soit certainement plus lent à cause des requêtes au serveur Web) ...
Vous vous êtes sûrement posé aussi cette question, je n'ai pas trouvé de réponse ...
Merci si vous avez une piste...
02/03/2007, 15h56
mnr_nfo

tu peux utiliser un datagrid
05/03/2007, 14h09
mydev

Je ne vois pas bien le lien avec le datagrid ; le datagrid est utilisé pour faire le lien entre des données en bdd et 1 visu sous forme tabulaire, non ?
Je voudrais un arbre, pas un tableau 8O ... Peux-tu me donner + d'infos ?
05/03/2007, 14h34
Mr N.

Cadeau:
http://www.chipchapin.com/WebTools/MenuTools/
05/03/2007, 14h48
goodpz

Pour ce qui est du html/css, le mieux c'est que tu trouves une page qui comporte un treeview proche de ce que tu souhaites et que tu étudies le code.

En ce qui me concerne, j'ai déja réalisé des treeviews en pure html/css (+ petites images pour les branches). C'était il y a quelques années déjà, si je devais refaire ça, je pense que je chercherais un autre moyen (du html plus propre). Le principe: <table> et <div> à gogo. La partie du treeview à gauche (celle qui comporte les branches) était réalisée avec des <td>. Certains <td> comportaient une background image pour une portion de branche verticale ou un embranchement vertical+horizontal ou un 'corner'. Chaque node parent et sa descendance était embarqué dans un <div> ce qui permettait d'étendre ou réduire les branches (avec css display=none) de manière interactive.

Pour ce qui est du php et la construction des données, ce poste te sera peut être utile: http://www.developpez.net/forums/sho...51&postcount=3
05/03/2007, 14h51
Mr N.

<table> et <div> à gogo... bof :roll:
<ul><li> par contre c'est plus mieux amha (tout dépend du besoin bien sûr)
05/03/2007, 14h53
mydev

Mr. N ,
Merci pour l'info ; j'avais parcouru ce site avant mon 1er post ; un peu vite sans doute ; j'avais éliminé le phpLayersMenu qui est classé ds la catégorie PHP Generating Dynamic HTML ; en fait pour l'arborescence, en regardant le code de plus près, il n'utilise que PHP, pas de DHTML ...
Y a aussi la technique utilisée par Developpez.com pour présenter l'arbo des sommaires (passe de O ou N pour traduire repli/dépli des noeuds ; après le rendu est simple) ...
merci encore
bye
05/03/2007, 14h55
goodpz

Pas évident je pense de gérer des branches verticales avec seulement des ul et li...

En effet, pas évident, mais c'est faisable :
http://img138.imageshack.us/img138/7...nshot77aq1.png

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<style type="text/css">
ul {
   list-style:none;
}
li {
   border-left:1px dotted red;
}
li.last {
   border-left:none;
}
</style>
<ul>
   <li class="last"><img src="http://img73.imageshack.us/img73/1413/dossierouvertor2.png" />alimentation
      <ul>
         <li><img src="http://img73.imageshack.us/img73/1413/dossierouvertor2.png" />fruits
            <ul>
               <li><img src="http://img73.imageshack.us/img73/1413/dossierouvertor2.png" />pomme
                  <ul>
                     <li class="last"><img src="http://img73.imageshack.us/img73/1413/dossierouvertor2.png" />golden</li>
                  </ul>
               </li>
               <li class="last"><img src="http://img73.imageshack.us/img73/1413/dossierouvertor2.png" />peche</li>
            </ul>
         </li>
         <li class="last"><img src="http://img73.imageshack.us/img73/1413/dossierouvertor2.png" />legumes
            <ul>
               <li><img src="http://img73.imageshack.us/img73/1413/dossierouvertor2.png" />Brocoli</li>
               <li class="last"><img src="http://img73.imageshack.us/img73/1413/dossierouvertor2.png" />Choufleur</li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

là j'ai mis border-left, mais en fait il suffit de remplacer par une image d'arrière plan pour simuler la ligne verticale et la positioner bien au milieu de l'image.
Je reconnais néanmoins qu'avec des <table> et des <div> on peut faire plus de choses...

05/03/2007, 15h29
goodpz

Citation:

En effet, pas évident, mais c'est faisable

Sympathique ; )

Citation:

Je reconnais néanmoins qu'avec des <table> et des <div> on peut faire plus de choses...

En cherchant un peu, je pense qu'on doit pouvoir trouver une solution à mi chemin entre 'tables à gogo' et la tienne.

approche simpliste ?

voici comment c'est fait pour les sommaires des docs de développez.com ; il reste évidemment à générer ce code à la volée ... Mais étant un peu débutant en PHP, que pensez-vous de cette solution simplissime en tout cas au niveau du HTML ...?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
 
<link rel="stylesheet" type="text/css" href="http://www.developpez.com/mainstyle-xhtml.css" />
 
<a class="sommaireSectionNom" href="./?filtre=&#xA;							OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="http://www.developpez.be/images/kitplus.gif" alt="Ouvrir"/><img src="http://www.developpez.be/images/kitplus.gif" alt="Ouvrir"/> Tout d&eacute;velopper</a><a class="sommaireSectionNom" href="./?filtre=&#xA;							NNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNNN">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="http://www.developpez.be/images/kitmoins.gif" alt="Ouvrir"/><img src="http://www.developpez.be/images/kitmoins.gif" alt="Ouvrir"/> Tout r&eacute;duire<br/></a><br/>
 
<!-- 
UNE ENTREE DE NIVEAU 1 DANS LE TREE VIEW : 
des espaces d'alignement, l'ancre : si on clique, on rappelle le script de construction du treeview avec le paramètre filtre (un O = Node Open,
un N = Node Closed) + la clé du node (ici sect1), on affiche à la suite des espaces l'imagette qui représente un "+" car ce node peut être déployé, 
on affiche à la suite 2 espaces puis le titre de l'entrée du menu : 1. Bases de données.
Définit l'indentation avec de simples espaces (&nbsp) répétés x fois
 -->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="sommaireSectionNom" href="?filtre=ONNNNNNNNNNNNNNNNNOONNNNNNNNNNNNNNNNNNNNNNNNN#sect1" id="sect1"><img src="http://www.developpez.be/images/kitplus.gif" alt="Ouvrir"/></a>&nbsp;&nbsp;<a class="sommaireSectionNom" href="?page=bdd">1. Bases de données</a>
<span class="sommaireSectionNbq">(32)</span><br/>
 
<!-- UNE ENTREE DE NIVEAU 1 DANS LE TREE VIEW -->
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="sommaireSectionNom" href="?filtre=NNNONNNNNNNNNNNNNNOONNNNNNNNNNNNNNNNNNNNNNNNN#sect4" id="sect4"><img src="http://www.developpez.be/images/kitplus.gif" alt="Ouvrir"/></a>&nbsp;&nbsp;<a class="sommaireSectionNom" href="?page=bibliotheques">2. Bibliothèques</a>
<span class="sommaireSectionNbq">(34)</span><br/>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="sommaireSectionNom" href="?filtre=NNNNNNNNNONNNNNNNNOONNNNNNNNNNNNNNNNNNNNNNNNN#sect10" id="sect10"><img src="http://www.developpez.be/images/kitplus.gif" alt="Ouvrir"/></a>&nbsp;&nbsp;<a class="sommaireSectionNom" href="?page=classes">3. Classes et objets</a>
<span class="sommaireSectionNbq">(19)</span><br/>
 
<!--.... j'en ai enlevé ...-->
 
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="sommaireSectionNom" href="?filtre=NNNNNNNNNNNNNNNNNNNONNNNNNNNNNNNNNNNNNNNNNNNN#sect19" id="sect19"><img src="http://www.developpez.be/images/kitmoins.gif" alt="Fermer"/></a>&nbsp;&nbsp;<a class="sommaireSectionNom" href="?page=expressions">9. Expressions</a>
<span class="sommaireSectionNbq">(9)</span><br/>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="sommaireQuestionNom" href="?page=expressions#bases_expressions">Qu'est-ce qu'une expression ?</a><script type="text/javascript">signal_si_nouveau(conv_date("08/07/2003"));</script><script type="text/javascript">signal_si_mise_a_jour(conv_date(""));</script><br/>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="sommaireSectionNom" href="?filtre=NNNNNNNNNNNNNNNNNNONNNNNNNNNNNNNNNNNNNNNNNNNN#sect20" id="sect20"><img src="http://www.developpez.be/images/kitmoins.gif" alt="Fermer"/></a>&nbsp;&nbsp;<a class="sommaireSectionNom" href="?page=expressions_regulieres">9.1. Expressions régulières</a>
<span class="sommaireSectionNbq">(8)</span><br/>
 
<!-- les parties JavaScript ne servent à rien pour l'affichage -->
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="sommaireQuestionNom" href="?page=expressions_regulieres#expressions_regulieres_supespace">Comment enlever les espaces qui sont en trop dans une chaîne ?</a><script type="text/javascript">signal_si_nouveau(conv_date("26/06/2006"));</script><script type="text/javascript">signal_si_mise_a_jour(conv_date("28/09/2006"));</script><br/>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="sommaireSectionNom" href="?filtre=NNNNNNNNNNNNNNNNNNOOONNNNNNNNNNNNNNNNNNNNNNNN#sect21" id="sect21"><img src="http://www.developpez.be/images/kitplus.gif" alt="Ouvrir"/></a>&nbsp;&nbsp;<a class="sommaireSectionNom" href="?page=fichiers">10. Fichiers et dossiers</a>
<span class="sommaireSectionNbq">(42)</span><br/>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="sommaireSectionNom" href="?filtre=NNNNNNNNNNNNNNNNNNOONNNNNNNNNNNNNNNNNNNNNNNON#sect44" id="sect44"><img src="http://www.developpez.be/images/kitplus.gif" alt="Ouvrir"/></a>&nbsp;&nbsp;<a class="sommaireSectionNom" href="?page=zend">18. Zend</a>
<span class="sommaireSectionNbq">(10)</span><br/>
 
</html>

05/03/2007, 17h52
mnr_nfo

conçernant le datagrid , c possible de creer un tree en jouant sur l'affichage des differents rows.mais aussi il existe un PEAR package,"HTML_TreeMenu" pour creer une structure d'arbre .et malheureusement ce package lui manque une documentation plus claire que l'existant .
si tu arrive a trouver une bonne solution n'hesite pas a la proposer.
:salut:
05/03/2007, 23h07
mydev

Citation:

Envoyé par mnr_nfo

conçernant le datagrid , c possible de creer un tree en jouant sur l'affichage des differents rows.mais aussi il existe un PEAR package,"HTML_TreeMenu" pour creer une structure d'arbre .et malheureusement ce package lui manque une documentation plus claire que l'existant .
si tu arrive a trouver une bonne solution n'hesite pas a la proposer.
:salut:

j'y travaille ;)