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

**vik93** · 12/12/2012, 11h28

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** · 12/12/2012, 15h42

javascript, treeview.

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

**vik93** · 12/12/2012, 16h04

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** · 13/12/2012, 08h35

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** · 18/12/2012, 11h19

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** · 22/01/2013, 16h17

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** · 23/01/2013, 12h03

**vik93** · 23/01/2013, 13h15

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** · 23/01/2013, 16h36

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 :

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
<?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** · 04/02/2013, 16h12

Bonjour à tous !

Bon je bloque sur les petits '+'

Voici le code :

Code php :

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
<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 :

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

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** · 12/02/2013, 11h27

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é?

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

Discussions similaires

Partager

Partager