[Tableaux] création d'un tableau arborescant

**peppena** · 26/01/2006, 16h43

bonjour ,
je me trouve obligé de créer un tableau arborescant : dont la 1ère colonne est le parent et les 2 autres des informations correspondantes :
:

Envoyé par exemple

EXEMPLE:
____________
| Chef | 2| 1996 |, dont 2 est le nbr de fils , 1996 est la date de recrutement ....
--------------------

et sous chef il ya d'autres employés , sle chef doit apparaitre avec un signe plus pour ouvrir l'hierarchie et visualisé les infos des autres employés

je ne sais pas comment faire soit en javascript soit en php ,
qqun a une idée ?

**Trunks** · 26/01/2006, 17h32

C'est à faire en PHP. Comment tu récupères les données? Par tableau? Par BD?

**peppena** · 27/01/2006, 09h10

bonjour ,

merci pr la réponse , les données sont statiques (fixes)

**peppena** · 27/01/2006, 10h46

bonjour ,
voilà par exemple c que je veux faire :

voilà un code que j trouvé ici sur le forum
il dessine bien une arborescence , mais je veux qu'elle soit multidimensionnelle

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
47
48
49
50
51
52
53
54
55
56
57
 
 
   <html>
   <head>
      <title>tableau arborescent</title>
      <style type='text/css'>
         .case{
            margin-left: 30px;
         }
         .liens{
            text-decoration: none;
         }
      </style>
      <script type='text/javascript'>
         function swap(elem){
            leparent = elem.parentNode;
            disp = 'none';
            if(elem.firstChild.innerHTML == '-'){
               elem.firstChild.innerHTML = "+";
               elem.lastChild.style.display = 'inline';
            }
            else{
               elem.firstChild.innerHTML = "-";
               elem.lastChild.style.display = 'none';
               disp = 'block';
            }
            for(var i=1;i<leparent.childNodes.length;i++){
               leparent.childNodes[i].style.display = disp;
            }
         }
         window.onload = function(){
            liens = document.getElementsByName('lesliens');
            for(var i=0;i<liens.length;i++)
               swap(liens[i]);
         }
      </script>
   </head>
   <body>
   <?
      function affiche($tab){
            foreach($tab as $key => $value){
               echo "<div class='case'>";
               echo "<a href='#' class='liens' name='lesliens' onclick='swap(this)'><span>-</span>&nbsp;",$key,"&nbsp;<span class='count'>(",is_array($value) ? count($value) : "1",")</span></a>";
               if(is_array($value))
                  affiche($value);
               else
                  echo "<div class='case'>",$value,"</div>";
               echo "</div>";
            }
      }
      $montab = array("a" => array("b" => array("f" => "bla","g" => "bla"), "c" => array("d" => "bla","e" => "bla")),"h" => "bla");
      affiche($montab);
   ?>
 
 
   </body>
</html>

**siddh** · 27/01/2006, 11h05

c est dans les sources javascript en fait (et bientot dans la page sources php)
http://javascript.developpez.com/sou...e=php#tabphpjs

qu est ce que tu veux dire par multidimensionnel ? ça l'est déjà !

**peppena** · 27/01/2006, 11h46

merci sdihh

ce que je n'arrive à faire c de remplacer les div par des table , tr et td ,
en fait je veux avoir une deuxième colonne sur la meme ligne que le fils ayant des infos

je ne sais pas si c clair

**siddh** · 27/01/2006, 11h58

euh répond moi là et pas la bas s il te plait, sinon on va pas s'en sortir

tu met des valeurs comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$montab = array("a" => array("b" => array("f" => "bla|bla1|bla2","g" => "bla|bla1|bla2""), "c" => array("d" => "bla|bla1|bla2"","e" => "bla|bla1|bla2"")),"h" => "bla|bla1|bla2"");

et tu met ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
$cols = explode("|",$value);
echo "<div class='case'><table><tr>";
foreach($cols as $col)
   echo "<td>",$col,"</td>";
echo "</tr></table></div>";

au lieu de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
echo "<div class='case'>",$value,"</div>";

mais je comprend pas pourquoi tu met pas tes données a la suite tout simplement ...

**peppena** · 27/01/2006, 14h33

merci infiniment sidhh pour l'attention ,
enfait je me rapproche à un résultat ,

voilà le code que j'essaye

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
   <html>
   <head>
      <title>tableau arborescent</title>
      <style type='text/css'>
         .case{
            margin-left: 30px;
         }
         .liens{
            text-decoration: none;
         }
      </style>
      <script type='text/javascript'>
         function swap(elem){
            leparent = elem.parentNode;
            disp = 'none';
            if(elem.firstChild.innerHTML == '-'){
               elem.firstChild.innerHTML = "+";
               elem.lastChild.style.display = 'inline';
            }
            else{
               elem.firstChild.innerHTML = "-";
               elem.lastChild.style.display = 'none';
               disp = 'block';
            }
            for(var i=1;i<leparent.childNodes.length;i++){
               leparent.childNodes[i].style.display = disp;
            }
         }
         window.onload = function(){
            liens = document.getElementsByName('lesliens');
            for(var i=0;i<liens.length;i++)
               swap(liens[i]);
         }
      </script>
   </head>
   <body>
   <?
      function affiche($tab){
            foreach($tab as $key => $value){
               echo "<div align='left' class='case'>";
              // echo '<table cellpadding="0" cellspacing="0" border="1" width="100%" >';
 
               if(is_array($value))
               {
                 echo "<a href='#' class='liens' name='lesliens' onclick='swap(this)'><span>-</span>&nbsp;",$key,"&nbsp;<span class='count'>(",is_array($value) ? count($value) : "1",")</span></a>";
                  affiche($value);
               }
               else
               {
                  echo '<table cellpadding="0" cellspacing="0" border="1" width="80%" >';
                  echo "<tr align='center' bgcolor='#D4D0C8'><td width='50%' bgcolor='#ECE9D8'><a href='#' class='liens' name='lesliens' ><span>.</span>&nbsp;",$key,"&nbsp;</a></td>";
                  echo "<td  width='50%' bgcolor='#E6E6FA'><b>&nbsp;&nbsp;",$value,"</b></td></tr>";
                  echo "</table>";
                }
               echo "</div>";
               //echo "</table>";
            }
      }
      $montab = array("Directions" => array("titre1" => array("Sous titre1" => "2012","soustitre2" => "1235","sous titre3 " => "1124"),"Titre2" => array("Sous titre" => "2012","Sous titre" => "1235","Sous titre " => "1124")));
      affiche($montab);
   ?>
 
 
   </body>
</html>

sauf que je n'arrive pas à ajouter un titre à la 2eme colonne

je ne sais pas si c clair ,

merci

**siddh** · 27/01/2006, 14h49

pas compris

un titre a quoi ? a sous titre ou au nombre ?

**peppena** · 27/01/2006, 14h58

un titre au nombre

**siddh** · 27/01/2006, 15h02

ben met ton titre dans la meme case que le nombre en les separant avec des |, tu fais un explode et tu récupères les deux pour en faire ce que tu veux

**peppena** · 27/01/2006, 15h30

bon , je ne sais pas si tu as tésté mon dernier code ,
enfait t'as vu le père de l'hiérarchie , 'Directions' , j'ai voulu placer sur la meme ligne et audessous des nombres un titre exp : 'Nomre d'employés'

et UN GRAND MERCI

**siddh** · 27/01/2006, 15h41

euh oui j'ai testé,

tu a reussit alors ?

désolé je suis un peu a la masse aujourd hui ...

**peppena** · 27/01/2006, 15h56

j'ai pas réussi
mais ne t'en fais pas ,
me voila me casse la gueule , et je posterai le résultat si je réussi à la faire

merci pr toi

**peppena** · 30/01/2006, 09h39

je n'arrive pas à remplacer les signes + et - qui se trouvent ) coté du nom par une image

et voilà le code que j'utilise au lieu du dernier que j'ai posté :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
 
<html>
   <head>
      <title>tableau arborescent</title>
      <style type='text/css'>
         .case{
            margin-left: 30px;
         }
         .liens{
            text-decoration: none;
         }
      </style>
      <script type='text/javascript'>
         function swap(elem){
            leparent = elem.parentNode;
            disp = 'none';
            minus = '<img src=\"TMimagesXL/minus01.gif\" border=\"0\" />';
            plus= '<img src=\"TMimagesXL/plus01.gif\" border=\"0\" />';
            if(elem.firstChild.innerHTML ==minus'){
               elem.firstChild.innerHTML = plus;
               elem.lastChild.style.display = 'inline';
            }
            else{
               elem.firstChild.innerHTML = minus;
               elem.lastChild.style.display = 'none';
               disp = 'block';
            }
            for(var i=1;i<leparent.childNodes.length;i++){
               leparent.childNodes[i].style.display = disp;
            }
         }
         window.onload = function(){
            liens = document.getElementsByName('lesliens');
            for(var i=0;i<liens.length;i++)
               swap(liens[i]);
         }
      </script>
   </head>
   <body>
   <?
      function affiche($tab){
            foreach($tab as $key => $value){
               echo "<div align='left' class='case'>";
              // echo '<table cellpadding="0" cellspacing="0" border="1" width="100%" >';
 
               if(is_array($value))
               {
                 echo "<a href='#' class='liens' name='lesliens' onclick='swap(this)'><span><img src=\"TMimagesXL/minus01.gif\" border=\"0\" /></span>&nbsp;",$key,"&nbsp;<span class='count'>(",is_array($value) ? count($value) : "1",")</span></a>";
                  affiche($value);
               }
               else
               {
                  echo '<table cellpadding="0" cellspacing="0" border="1" width="80%" >';
                  echo "<tr align='center' bgcolor='#D4D0C8'><td width='50%' bgcolor='#ECE9D8'><a href='#' class='liens' name='lesliens' ><span>.</span>&nbsp;",$key,"&nbsp;</a></td>";
                  echo "<td  width='50%' bgcolor='#E6E6FA'><b>&nbsp;&nbsp;",$value,"</b></td></tr>";
                  echo "</table>";
                }
               echo "</div>";
               //echo "</table>";
            }
      }
      $montab = array("Directions" => array("titre1" => array("Sous titre1" => "2012","soustitre2" => "1235","sous titre3 " => "1124"),"Titre2" => array("Sous titre" => "2012","Sous titre" => "1235","Sous titre " => "1124")));
      affiche($montab);
   ?>
 
 
   </body>
</html>

**siddh** · 30/01/2006, 10h38

deja sur cette ligne, y a une ' en trop

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if(elem.firstChild.innerHTML ==minus'){

**peppena** · 30/01/2006, 10h43

non c une faute de frappe , c pas histoire de cotes ,

as tu essaye le code ??
ça marche chez toi ??

**siddh** · 30/01/2006, 10h51

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
minus = '<img src=\"TMimagesXL/minus01.gif\" border=\"0\" />';
            plus= '<img src=\"TMimagesXL/plus01.gif\" border=\"0\" />';

enleve les \ ils servent a rien car la tu n'est pas dans un echo

**peppena** · 30/01/2006, 11h04

c'est fait mais rien n'a changé et puis encore , l'arborescence ne se ferme plus

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
 
 
<html>
   <head>
      <title>tableau arborescent</title>
      <style type='text/css'>
         .case{
            margin-left: 30px;
         }
         .liens{
            text-decoration: none;
         }
      </style>
      <script type='text/javascript'>
         function swap(elem){
            leparent = elem.parentNode;
            disp = 'none';
            minus = '<img src="TMimagesXL/minus01.gif" width="11" height="11"  border="0" />';
            plus= '<img src="TMimagesXL/plus01.gif"  width="11" height="11" border="0" />';
            if(elem.firstChild.innerHTML ==minus){
               elem.firstChild.innerHTML = plus;
               elem.lastChild.style.display = 'inline';
            }
            else{
               elem.firstChild.innerHTML = minus;
               elem.lastChild.style.display = 'none';
               disp = 'block';
            }
            for(var i=1;i<leparent.childNodes.length;i++){
               leparent.childNodes[i].style.display = disp;
            }
         }
         window.onload = function(){
            liens = document.getElementsByName('lesliens');
            for(var i=0;i<liens.length;i++)
               swap(liens[i]);
         }
      </script>
   </head>
   <body>
   <?
       function affiche($tab){
            foreach($tab as $key => $value){
               echo "<div align='left' class='case'>";
 
 
               if(is_array($value))
               {
                 echo '<a href="#" class="liens" name="lesliens" onclick="swap(this)"><span><img src="TMimagesXL/plus01.gif" width="11" height="11" border="0" /></span><b>&nbsp;',$key,'&nbsp;</b><span class="count">(",is_array($value) ? count($value) : "1",")</span></a>';
                  affiche($value);
               }
               else
               {
                  echo '<table cellpadding="0" cellspacing="0" border="1" width="80%" >';
                  echo "<tr align='left' bgcolor='#D4D0C8'><td bgcolor='#D4D0C8'><span>.</span>&nbsp;",$key,"&nbsp;</td>";
 
                  echo "<td  width='50%' bgcolor='#ECE9D8'>&nbsp;&nbsp;",$value,"</td></tr>";
                  echo "</table>";
                }
               echo "</div>";
 
            }
      }
      $montab = array("Directions" => array("titre 001" => array("titre69" => "2012","titre 22" => "1235","titre 6 " => "1124"),"titre1" => array("titre2" => "2012","titre5" => "1235","titre3 " => "1124")));
 
      affiche($montab);
   ?>
 
 
   </body>
</html>

**siddh** · 30/01/2006, 11h07

je regarderais ca entre 12 et 13

[Tableaux] création d'un tableau arborescant

Langage PHP

Discussions similaires

Partager

Partager