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

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

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

affichage d'un arbre a partir d'une colonne

JavaScript

Vue hybride

Discussions similaires

Partager

Partager