affichage d'un arbre a partir d'une colonne

Version imprimable

28/06/2009, 09h28
samdou

affichage d'un arbre a partir d'une colonne

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

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

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

29/06/2009, 16h25
samdou

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
29/06/2009, 16h27
SpaceFrog

heu on peut pas recupérer un truc aussi mal parti ...
ta hierarchie est incompréhensible ...
29/06/2009, 16h32
samdou

comment je fais t'as une solution.merci
29/06/2009, 16h40
SpaceFrog

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?
29/06/2009, 17h34
samdou

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?

créer une arborescence

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:

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:

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>

Ce post m'amuse :P

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

29/06/2009, 22h45
samdou

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?
29/06/2009, 22h47
samdou

merci a toi aussi.franculo_caoulene
30/06/2009, 09h20
gwyohm

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...
30/06/2009, 10h07
franculo_caoulene

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.

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:

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.

30/06/2009, 12h26
franculo_caoulene

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.