Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript
JavaScript Forum programmation JavaScript. Lire : Cours JavaScript, FAQ JavaScript, Toutes les FAQ JavaScript et Sources JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
Vieux 28/06/2009, 09h28   #1
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
Par défaut 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

Dernière modification par Deepin ; 30/06/2009 à 12h06. Motif: Ajout du balise [QUOTE]
samdou est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/06/2009, 08h35   #2
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
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 : Homme
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
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
__________________
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
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/06/2009, 16h25   #3
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
samdou est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/06/2009, 16h27   #4
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
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 : Homme
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
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/06/2009, 16h32   #5
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
samdou est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/06/2009, 16h40   #6
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
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 : Homme
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
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/06/2009, 17h34   #7
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?
samdou est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/06/2009, 18h11   #8
Expert Confirmé
 
Avatar de franculo_caoulene
 
Inscription : octobre 2003
Messages : 2 886
Détails du profil
Informations forums :
Inscription : octobre 2003
Messages : 2 886
Points : 2 559
Points : 2 559
Par défaut 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>
__________________
Penser à la recherche et au bouton
franculo_caoulene est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/06/2009, 19h28   #9
Modérateur
 
Avatar de gwyohm
 
Inscription : octobre 2007
Messages : 779
Détails du profil
Informations personnelles :
Âge : 32
Localisation : France, Paris (Île de France)

Informations forums :
Inscription : octobre 2007
Messages : 779
Points : 937
Points : 937
Envoyer un message via Yahoo à gwyohm
Ce post m'amuse
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.
__________________
on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
Pas de question technique par MP
gwyohm est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/06/2009, 22h45   #10
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?
samdou est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 29/06/2009, 22h47   #11
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
samdou est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 30/06/2009, 09h20   #12
Modérateur
 
Avatar de gwyohm
 
Inscription : octobre 2007
Messages : 779
Détails du profil
Informations personnelles :
Âge : 32
Localisation : France, Paris (Île de France)

Informations forums :
Inscription : octobre 2007
Messages : 779
Points : 937
Points : 937
Envoyer un message via Yahoo à gwyohm
Citation:
Envoyé par samdou Voir le message
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...
__________________
on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
Pas de question technique par MP
gwyohm est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 30/06/2009, 10h07   #13
Expert Confirmé
 
Avatar de franculo_caoulene
 
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
franculo_caoulene est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 30/06/2009, 12h16   #14
Modérateur
 
Avatar de gwyohm
 
Inscription : octobre 2007
Messages : 779
Détails du profil
Informations personnelles :
Âge : 32
Localisation : France, Paris (Île de France)

Informations forums :
Inscription : octobre 2007
Messages : 779
Points : 937
Points : 937
Envoyer un message via Yahoo à gwyohm
Citation:
Envoyé par franculo_caoulene Voir le message
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.
__________________
on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
Pas de question technique par MP
gwyohm est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 30/06/2009, 12h26   #15
Expert Confirmé
 
Avatar de franculo_caoulene
 
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
franculo_caoulene est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité
Outils de la discussion



Fuseau horaire GMT +1. Il est actuellement 11h42.


 
 
 
 
Partenaires

Hébergement Web