affichage d'un arbre a partir d'une colonne

samdou · 28/06/2009, 09h28

j'ai une colonne dans ma table de bdd sous cette forme

Citation:

b1_a
b2_a
b3_a

c1_b1_a
c2_b1_a

c1_b2_a
c2_b2_a

d1_c2_b2_a
e1_d1_c2_b2_a

d1_c1_b1_a
f2_e1_d1_c2_b2_a

et je veux afficher une arboresence a patyir de cette colonne ,esr ce que c'est possible et comment je fais,merci

SpaceFrog · 29/06/2009, 08h35

On t'a déja expliqué plusieurs fois qu'il fallait en fait une table de hierarchie

Code :

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

1
2
3
4
5
6
7
8
9
 
id  rubrique  parent
1     n1_1        0
2     n1_2        0
3     n2_1        1
4     n2_2        1
5     n2_3        1
6     n2_4        2
7     n3_1        5

le champs parent contient contient l'id du parent direct de la rubrique
les champs ayant parent 0 sont les rubriques de premier niveau

samdou · 29/06/2009, 16h25

je veux l'affichage d'un arbre, en fait ma table est sous cette forme
id rubrique parent
1 n1_1 0
2 n1_2 0
3 n2_1 1
4 n2_2 1
5 n2_3 1
6 n2_4 2
7 n3_1 5
et en plus j'ai une collonne de cette forme
b1_a
b2_a
b3_a

c1_b1_a
c2_b1_a

c1_b2_a
c2_b2_a

d1_c2_b2_a
e1_d1_c2_b2_a

d1_c1_b1_a
f2_e1_d1_c2_b2_a

mais mon probleme comment afficher la forme hierarchique par exemple
---a
-----b1
--------c1
-----------d1
--------c2
-----b2
--------c1
--------c2
----------d1
-------------e1
---------------f2
----b3
merci

SpaceFrog · 29/06/2009, 16h27

heu on peut pas recupérer un truc aussi mal parti ...
ta hierarchie est incompréhensible ...

samdou · 29/06/2009, 16h32

comment je fais t'as une solution.merci

SpaceFrog · 29/06/2009, 16h40

en plus c'est pas en javascript que va se faire l'essentiel de l'opération ...
ça se passera au niveau de la requete dans la base de données ...
en mysql?

samdou · 29/06/2009, 17h34

si je peux recuperer dans des liste ;f2_e1_d1_c2_b2_a et e1_d1_c2_b2_a
dans mon exemple je peux faire l'affichage de ces deuxcomme un arbre?

franculo_caoulene · 29/06/2009, 18h11

Tu ne nous aides pas à t'aider! On ne comprend ce que sont b1, b2, c2, etc.

Pour la table que tu donnes au tout début, il faut que tu sois capable de produire ce code javascript depuis le serveur :

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
  var a = [
    ["n1_1", [ 
        ["n2_1"],
        ["n1_2"],
        ["n2_3", [
            ["n3_1"]
          ]
        ]
      ]
    ],
    ["n1_2", [
        ["n2_4"]
      ]
    ],
  ];

Ce ne sont que des tableaux imbriqués. Ce qui permettra ensuite d'utiliser ce code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>créer une arborescence</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  /* code css */
  </style>
</head>
<body>
  <!-- code xhtml -->
  <script type="text/javascript">
  var a = [
    ["n1_1", [ 
        ["n2_1"],
        ["n1_2"],
        ["n2_3", [
            ["n3_1"]
          ]
        ]
      ]
    ],
    ["n1_2", [
        ["n2_4"]
      ]
    ],
  ];
 
  var FC = {
    creerListe: function(a) {
      var ul = document.createElement("ul");
      for (var i=0,imax=a.length; i<imax; i++) {
        var li = FC.creerListeItem(a[i])
        if (a[i].length>1 && typeof a[i] !== "string") { 
          li.appendChild(FC.creerListe(a[i][1]));
        }
        ul.appendChild(li);
      }
      return ul;
    },
    creerListeItem: function(item, ul) {
      var li = document.createElement("li");
      var tn = document.createTextNode(item[0]);
      li.appendChild(tn);
      return li;
    }
  }
 
  document.body.appendChild(FC.creerListe(a));
  </script>
</body>
</html>

gwyohm · 29/06/2009, 19h28

Ce post m'amuse

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
function WeirdTreeItem(key, object) {
	this.subElements = {};
	this.count = 0;
	this.key = key;
	this.object = object;
}
 
WeirdTreeItem.prototype.getItem = function(keyParts, object) {
 
	if(keyParts.length == 0) {
		if(object) {
			this.object = object;
		}
		return this;
	}
 
	var top = keyParts.shift();
	if(! this.subElements[top]) {
		if(! object) return null;
		this.subElements[top] = new WeirdTreeItem(top);
		this.count++;
	}
	return this.subElements[top].getItem(keyParts, object);
}
 
WeirdTreeItem.prototype.addItem = function(object, options) {
	options = options || {};
	options.keyProp = options.keyProp || null;
	options.separator = options.separator || "_";
	options.reversed = options.reversed || false;
 
	var key = object;
	if(options.keyProp != null) {
		key = object[keyProp];
	}
	var keyParts = key.split(options.separator);
	if(options.reversed) {
		keyParts.reverse();
	}
	return this.getItem(keyParts, object);
}
 
WeirdTreeItem.prototype.draw = function(target) {
 
	if(this.key) {
		var li = document.createElement("li");
		target.appendChild(li)
		li.innerHTML = this.key;
		target = li;
	}
	if(this.count > 0) {
		var ul = document.createElement("ul");
		target.appendChild(ul);
		target = ul;
		for(var subElem in this.subElements) {
			this.subElements[subElem].draw(target);
		}
	}
}
 
WeirdTreeItem.prototype.isValid = function() {
	var thisValid = true;
	if(this.key) {
		thisValid = (this.object != null);
		if(! thisValid) {
			alert("La clé '" + this.key + "' n'a pas d'objet");
		}
	}
	for(var subElem in this.subElements) {
		thisValid &= this.subElements[subElem].isValid();
	}
	return thisValid;
}
 
var options = {reversed: true}
var root = new WeirdTreeItem();
root.addItem("b1_a", options);
root.addItem("b2_a", options);
root.addItem("b3_a", options);
root.addItem("c1_b1_a", options);
root.addItem("c2_b1_a", options);
root.addItem("c1_b2_a", options);
root.addItem("c2_b2_a", options);
root.addItem("d1_c2_b2_a", options);
root.addItem("e1_d1_c2_b2_a", options);
root.addItem("d1_c1_b1_a", options);
root.addItem("f2_e1_d1_c2_b2_a", options);
//root.isValid();
root.draw(document.body);

Bon, le nom des méthodes n'est pas des plus judicieux, ca permet la création de branches même si les parents n'existent pas, mais c'est juste venu comme ca.

samdou · 29/06/2009, 22h45

merci beucoup gwyohm,j'ai une question apropos de ta reponse ,mes donnes
b1_a
b2_a
b3_a

c1_b1_a
c2_b1_a

c1_b2_a
c2_b2_a

d1_c2_b2_a
ceux sont dans ma table (bdd)donc la forme hierarchique est dynamique a chaque fois je peux ajouter un fils ou un sous fils est ce que je peux recupere mes donner (b1_a,b2_a,...) dans une liste et je fais :
root.addItem(maliste,options);est ce que je peux faire ca?

samdou · 29/06/2009, 22h47

merci a toi aussi.franculo_caoulene

gwyohm · 30/06/2009, 09h20

Citation:

Envoyé par samdou

merci beucoup gwyohm,j'ai une question apropos de ta reponse ... est ce que je peux recupere mes donner (b1_a,b2_a,...) dans une liste et je fais :
root.addItem(maliste,options);est ce que je peux faire ca?

Un objet Liste à proprement parler n'existe pas en javascript. En revanche, tu peux passer par un tableau :
[code]
var elements = ["b1_a", "b2_a", ... , "en_dn_cn_bn_a"];
[code]
Ensuite tu peux ajouter une méthode à l'objet WeirdTreeItem par exemple addItems et avec une "vanilla loop" appeler la méthode addItem pour chaque élément du tableau...

franculo_caoulene · 30/06/2009, 10h07

Je ne suis pas d'accord avec le principe proposé par gwyohm. Il y a trois étapes à dans le processus :
- extraire les données
- traiter les données
- mettre en forme l'arbre

Il faudrait plutôt décomposer les valeurs (traiter les données) coté serveur et non coté javascript. Ça alourdi le code client.

gwyohm · 30/06/2009, 12h16

Citation:

Envoyé par franculo_caoulene

Je ne suis pas d'accord avec le principe proposé par gwyohm...
Il faudrait plutôt décomposer les valeurs (traiter les données) coté serveur et non coté javascript. Ça alourdi le code client.

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
var i=10000;
var dtStart = new Date().getTime();
while(i>0) {
var options = {reversed: true}
var root = new WeirdTreeItem();
root.addItem("c2_b1_a", options);
root.addItem("c1_b2_a", options);
root.addItem("c2_b2_a", options);
root.addItem("d1_c2_b2_a", options);
root.addItem("b1_a", options);
root.addItem("b2_a", options);
root.addItem("b3_a", options);
root.addItem("c1_b1_a", options);
root.addItem("e1_d1_c2_b2_a", options);
root.addItem("d1_c1_b1_a", options);
root.addItem("f2_e1_d1_c2_b2_a", options);
//root.isValid();
//root.draw(document.body);
i--;
}
alert(new Date().getTime() - dtStart);

L'arbre est donc construit 10000 fois.
La part de construction (celle qui selon toi est problématique et alourdi le client) est sur ce jeu de données (limité j'en conviens) de moins de 3 secondes sur FF et de moins de 6 sur IE7, sur ma machine.
Ne conservons que le plus mauvais chiffre, cela fait une moyenne inférieure à 0,0006s par arbre !
Je n'appelle pas ca alourdir le client, et ca répond à la problématique.

franculo_caoulene · 30/06/2009, 12h26

Ce n'est pas dirigé contre toi et oui ça répond à la problématique. Mais tout ce qui peut être fait en amont, doit être fait en amont.
Dans l'utilisation qui est faite de javascript, les données ne devraient pas être traitées, mais juste utilisées.

C'est un choix, ni plus, ni moins.

29/06/2009, 16h27	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 29 074 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 29 074 Points : 43 300 Points : 43 300	heu on peut pas recupérer un truc aussi mal parti ... ta hierarchie est incompréhensible ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

29/06/2009, 16h40	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 29 074 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 29 074 Points : 43 300 Points : 43 300	en plus c'est pas en javascript que va se faire l'essentiel de l'opération ... ça se passera au niveau de la requete dans la base de données ... en mysql? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

30/06/2009, 10h07	#13
franculo_caoulene Expert Confirmé Inscription : octobre 2003 Messages : 2 886 Détails du profil Informations forums : Inscription : octobre 2003 Messages : 2 886 Points : 2 559 Points : 2 559	Je ne suis pas d'accord avec le principe proposé par gwyohm. Il y a trois étapes à dans le processus : - extraire les données - traiter les données - mettre en forme l'arbre Il faudrait plutôt décomposer les valeurs (traiter les données) coté serveur et non coté javascript. Ça alourdi le code client. __________________ Penser à la recherche et au bouton
	00

30/06/2009, 12h26	#15
franculo_caoulene Expert Confirmé Inscription : octobre 2003 Messages : 2 886 Détails du profil Informations forums : Inscription : octobre 2003 Messages : 2 886 Points : 2 559 Points : 2 559	Ce n'est pas dirigé contre toi et oui ça répond à la problématique. Mais tout ce qui peut être fait en amont, doit être fait en amont. Dans l'utilisation qui est faite de javascript, les données ne devraient pas être traitées, mais juste utilisées. C'est un choix, ni plus, ni moins. __________________ Penser à la recherche et au bouton
	00

29/06/2009, 16h25	#3
samdou Candidat au titre de Membre du Club Inscription : avril 2009 Messages : 41 Détails du profil Informations forums : Inscription : avril 2009 Messages : 41 Points : 11 Points : 11	je veux l'affichage d'un arbre, en fait ma table est sous cette forme id rubrique parent 1 n1_1 0 2 n1_2 0 3 n2_1 1 4 n2_2 1 5 n2_3 1 6 n2_4 2 7 n3_1 5 et en plus j'ai une collonne de cette forme b1_a b2_a b3_a c1_b1_a c2_b1_a c1_b2_a c2_b2_a d1_c2_b2_a e1_d1_c2_b2_a d1_c1_b1_a f2_e1_d1_c2_b2_a mais mon probleme comment afficher la forme hierarchique par exemple ---a -----b1 --------c1 -----------d1 --------c2 -----b2 --------c1 --------c2 ----------d1 -------------e1 ---------------f2 ----b3 merci
	00

29/06/2009, 16h32	#5
samdou Candidat au titre de Membre du Club Inscription : avril 2009 Messages : 41 Détails du profil Informations forums : Inscription : avril 2009 Messages : 41 Points : 11 Points : 11	comment je fais t'as une solution.merci
	00

29/06/2009, 17h34	#7
samdou Candidat au titre de Membre du Club Inscription : avril 2009 Messages : 41 Détails du profil Informations forums : Inscription : avril 2009 Messages : 41 Points : 11 Points : 11	si je peux recuperer dans des liste ;f2_e1_d1_c2_b2_a et e1_d1_c2_b2_a dans mon exemple je peux faire l'affichage de ces deuxcomme un arbre?
	00

29/06/2009, 22h45	#10
samdou Candidat au titre de Membre du Club Inscription : avril 2009 Messages : 41 Détails du profil Informations forums : Inscription : avril 2009 Messages : 41 Points : 11 Points : 11	merci beucoup gwyohm,j'ai une question apropos de ta reponse ,mes donnes b1_a b2_a b3_a c1_b1_a c2_b1_a c1_b2_a c2_b2_a d1_c2_b2_a ceux sont dans ma table (bdd)donc la forme hierarchique est dynamique a chaque fois je peux ajouter un fils ou un sous fils est ce que je peux recupere mes donner (b1_a,b2_a,...) dans une liste et je fais : root.addItem(maliste,options);est ce que je peux faire ca?
	00

29/06/2009, 22h47	#11
samdou Candidat au titre de Membre du Club Inscription : avril 2009 Messages : 41 Détails du profil Informations forums : Inscription : avril 2009 Messages : 41 Points : 11 Points : 11	merci a toi aussi.franculo_caoulene
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email