Créer une arborescence de données comme Windows Explorer

[vik93]

Bonjour,

Aujourd'hui je suis confronté à un problème qui est le suivant :
J'ai trois tables (Entité, Agence, Chantier) :

Un chantier n'a qu'une et une seule agence, une agence n'a qu'une et une seule entité.


Maintenant, je souhaite créer une arborescence (comme celle de Windows Explorer, avec les petits "+" pour afficher par exemple les agences d'une entité).

J'ai beau chercher, mais je ne trouve pas de solution pour faire ça.

Auriez-vous une petite idée ?

En vous remerciant d'avance

Edit : J'utilise du html - php pour la création de mon projet.

[Vil'Coyote]

javascript, treeview.

http://jquery.bassistance.de/treeview/demo/

[vik93]

Tout d'abord, merci pour la réponse.

C'est exactement ce qu'il me faut !!! Cependant je ne maîtrise pas le jquery, est ce qu'il y a du code associé à cette page pour que je puisse m'en inspirer et l'utiliser selon mes besoins ?

[ze0ne]

Salut, je t'aurai également conseillé ce système qui est vraiment très simple à mettre en place, même sans connaissance particulière en javascript, grâce à jQuery.

Je t'invite à regarder la document de ce dernier https://github.com/jzaefferer/jquery-treeview c'est un jeu d'enfant et le résultat est vraiment satisfaisant.

Sinon tu as jQtree dans le même esprit qui offre encore plus d'option mais qui est à mon sens, plus difficile à appréhender tant les options sont diverses.

Si tu as des questions, n'hésites pas.

[vik93]

Merci beaucoup pour ton aide !!! Je vais essayer de comprendre le fonctionnement, et si j'ai des questions, je n'hésiterai pas

Merci encore, j'ai mis des jours à chercher ça, et je trouve enfin !!!

[vik93]

Bonjour !

Bon, je vais enfin commencer à créer cette arborescence. Cependant, j'ai un soucis niveau base de données pour mettre en application vos exemples cités ci-dessus :

J'ai trois tables :
Entite (numEntite)
Agence (numAgence, #numEntite)
Chantier (numAgence, #numAgence)


Voici mes trois tables principales, je ne vois pas comment je pourrai faire pour créer une arborescence à partir de là. Je pense plus que c'est une question de logique (que je n'arrive pas à voir) qui me perturbe.

Auriez-vous une idée ?

En vous remerciant d'avance.

[Vil'Coyote]

bon en principe de ce que je lis la logique voudrais que

une entité a n agence, une agence a n chantier?

dans ce cas :

+ Entité 1
+ Entité 2
|--+agence 1
|--+agence 2
| |-chantier 1
| |-chantier 2
| |-chantier 3
|--+agence 3
|--+agence 4
+Entité 3
+Entité 4

[vik93]

Oui ça c'est compris ! Mais je bloque plus par rapport aux requêtes ou fonctions... Comment faire pour créer cet affichage ?

Entite1
--Agence1
--Agence2
----Chantier1
--Agence3
Entité2
etc etc


A la place des '--', je vais faire en sorte de mettre des '+' après avoir réussi à afficher ces éléments (grâce aux indications données ci dessus par les membres du forum).

[vik93]

Muahahaha j'ai réussi (J'adore cette sensation quand on réussi quelque chose en PHP après des heures et des heures de recherche, on dirai qu'on a gagné la coupe du monde....)

Donc voici le code :

Code php :

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
<?php
 
 foreach($entite as $uneEntite)
 {
     $e = $uneEntite['nom_entite'];
	echo $e."<br>";
        $numEn = $uneEntite['ref_entite'];
        foreach ($agence as $uneAgence)
        {
            $ag = $uneAgence['num_entite'];
 
 
            if($numEn == $ag)
            {
                echo "--".$uneAgence['nom_agence']."<br>";
                $numAg = $uneAgence['ref_agence'];
                    foreach($chantier as $ch)
                    {
                        $cha = $ch['num_agence'];
                        if($cha == $numAg)
                        {
                            echo "----".$ch['nom_chantier']."<br>";
                        }
                    }
            }
        }
 }
 ?>

Ce qui donne comme résultat (pour mon cas) :

FRANCE
--PARIS
----Paris 12
--LYON
SPAIN.


Bon ma prochaine étape sera de mettre les '+' avec ce que vous m'avez fournit plus haut... Je vous tiendrai au courant de mes difficultés (en espérant ne pas en avoir ! Mais là c'est sur quelque chose que je ne maîtrise pas, on verra bien...).

[vik93]

Bonjour à tous !

Bon je bloque sur les petits '+'

Voici le code :

Code php :

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
<head>
<link rel="stylesheet" href="../jquery/jquery.treeview.css" />
<link rel="stylesheet" href="../jquery/screen.css" />
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery.treeview.js" type="text/javascript"></script>
 
<script type="text/javascript">
		$(function() {
			$("#tree").treeview({
				collapsed: true,
				animated: "medium",
				control:"#sidetreecontrol",
				persist: "location"
			});
		})
 
</script>
</head>
<body>
 
<ul id="tree">
<?php
 
 foreach($entite as $uneEntite)
 {
     $e = $uneEntite['nom_entite']; ?>
     <li><span><strong><?php echo $e; ?> </strong></span>
         <ul>
	<?php 
        $numEn = $uneEntite['ref_entite'];
        foreach ($agence as $uneAgence)
        {
            $ag = $uneAgence['num_entite'];
 
 
            if($numEn == $ag)
            { ?>
                <li><a href="#"><?php echo $uneAgence['nom_agence']; ?></a></li>
 
                    <ul>
                <?php 
                $numAg = $uneAgence['ref_agence'];
                    foreach($chantier as $ch)
                    {
                        $cha = $ch['num_agence'];
                        if($cha == $numAg)
                        { ?>
 
                            <li><a href="#"> <?php echo $ch['nom_chantier']; ?> </a></li>
 
 
                            <?php 
                        }
                    }?> </ul>  <?php
            } 
        }?> </ul>  <?php
 }
 ?>
         </u>
         </body>

et ça m'affiche le résultat du post précédent (avec les puces).

Les '+' ne viennent pas !

Normalement, avec :

Code html :

1
2
3
4
<link rel="stylesheet" href="../jquery/jquery.treeview.css" />
<link rel="stylesheet" href="../jquery/screen.css" />
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery/jquery.treeview.js" type="text/javascript"></script>

Ca devrait fonctionner.... (L'arborescence des lien est bien correct !)


Avez-vous une idée pour résoudre mon problème ?


ps : je me suis inspiré du Git fourni ci dessus !

[Vil'Coyote]

as tu essayé avec un petit coup de firebug ou de console javascript dans firefox? histoire de voir si d'une par les actions étaient prise en compte et d'autre par si tes fichiers css étaient correctement intégré?