Discussion :

[wincroc]

Bonjour,
je suis toujours entrain de créer mon composant graphique TABLE.
Pour l'instant le clic sur la colonne entrain le trie de la colonne.
http://www.wincroc.fr
J'ai placé une loupe a droite de chaque titre de colonne pour la recherche.
Le but est que lorsque l'utilisateur clique sur la loupe, un champ de saisie apparaisse a la place du label de la colonne.

Que dois-je faire :

solution 1 : prévoir a la création de la table le champ de saisi et au clic de la loupe, cacher le label et montre le champs de saisi

Solution 2 : ne pas le prévoir a la création de la table mais au clic sur la loupe, cacher le label et créer un noeud comportant le champ de saisie. Une fois la recherche terminée, je supprime le noeux au lieu de le masquer pour remettre le label.

Le but du champs de saisi, est qu'au fur et a mesure que l'utilisateur tape le mot a rechercher, je positionne le bandeau de sélection sur le mot le plus proche.

[SpaceFrog]

prévois ton champs de saisie dès le départ en visibility:hidden ou display:none et fait le apparaitre quand tu en as besoin ...

[jobern]

Je serais plutôt d'accord avec SpaceFrog... mais difficile de choisir sans avoir une idée plus précise de ce que tu veux faire.

Tu dis vouloir placer ton champ de saisie à la place du label de la colonne : or tu as déjà deux boutons en entête, pourquoi ne pas afficher UN champ recherche à cet endroit là ? le clic sur la loupe donnerait le focus au champ de recherche et changerait son label ?

Pour moi, ça présente un avantage : le client sait tout de suite qu'il peut faire des recherches et tu n'as pas à créer/supprimer des nœuds dans la table !

Mais bien sûr, le positionnement du champ à la place du label donne plus de dynamisme à la page ...

Ceci étant, t'es-tu déjà amusé à tester un tri sur une colonne de noms qui contiendrait des trucs du genre : Benveniste, Bréal, Brøndal, Brosses, Bühler, ... et autres joyeusetés ( Hervás, Kuriłowitz, ...) fournies par des chaines codées en Unicode ???

Ça m'interesserai bigrement .
-

[wincroc]

ayé, super, j'ai réussi.
Excusez mais je suis tellement content, ca fait que quelques jours que j'apprend Javascript et c'est dingue ce qu'on arrive a faire.
Allez voir ma table : http://www.wincroc.fr
cliquez par exemple sur la loupe de la premiere colonne.
Dans le champs de saisi, tapez "bruno", au fur et a mesure, le bandeau de sélection va se positionner.

Par contre maintenant, j'aimerai que lorsque l'utilisateur clique a l'exterieur du champs de saisi, revoir le LABEL et caché mon INPUT. Je n'y arrive pas

[SpaceFrog]

onblur ... tu fais l'inverse de ce que tu as fait pour l'afficher ...

sinon

[wincroc]

ca marche pas :
voici ce que j'ai mis dans le code qui construit les colonnes :

Code :

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

1
2
3
 
Event.observe(champSaisie,"keyup",function(event) { This.evenementRechercheLoupe(event); });
Event.observe(champSaisie,"onblur",function(event) { This.fermetureLoupe(event); });

dans la methode :fermetureLoupe j'ai mis juste un alert("test") pour voir si je passais dedans et non , pourquoi ?

[wincroc]

autant pour moi, c'est blur et non onblur avec prototype

[wincroc]

http://www.wincroc.fr
c'est bon, ca marche !

il y a encore un probleme, a la creation de la table, je definis un % pour chaque colonne. Mais lors du remplissage, si le contenu est plus grand que la largeur de la colonne, celle-ci s'agrandie, comme empecher cela ?

Sinon, que pensez vous de vous petit composant graphique ?

[SpaceFrog]

overflow sur les td et si ça marche par mets un div dans chaque td ...

[wincroc]

dans mon fichier CSS, j'ai mis :

Code :

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

1
2
3
4
5
6
7
8
 
.td{
	border-right: 1px solid #3399CC;
	border-left: 1px solid #3399CC;
	border-top: 1px solid #3399CC;
	border-bottom: 1px solid #3399CC;
	overflow:hidden;
}

mais si je met 100 caractere dans la premiere colonne, celle-ci s'élargit au point d'arriver a la fin de la deuxieme colonne au niveau des entetes.

[wincroc]

j'ai beau faire des essais, je ne comprend pas pourquoi les colonnes s'élargissent.
Pourtant regardez dans le code source, a chaque balise td, j'ai mis overflow:hidden.
Regardez comme c'est moche : http://www.wincroc.fr

[wincroc]

je n'ai toujours pas trouver et pourtant je cherche, je cherche !
je n'avais vraiment pas d'idée ?

[SpaceFrog]

si tu mets 100 caractères il ne coupera pas le mot ...
regarde du coté de text-wrap ?
sinon un div dans chaque td, le css sur le td et le contenu dans le div ...

[wincroc]

je ne trouve pas grand chose sur text-wrap !
sinon, je pensais a un truc :
Mettre dans chaque td, un textarea comme ca, il place mon texte dans une cellule multiligne automatiquement, normalement, je n'aurai plus le pb d'élargissement je pense. Et en plus, la prochaine etape est de pouvoir mettre ma table en saisi directement dans les cellules, comme ca, les champs seront deja présent.

Maintenant, est plus logique de mettre des div dans les TD et de crée un champ textarea au clic sur une cellule au lieu de tous les créer avant ?

[SpaceFrog]

textearea ou div ... c'est ce que je te propose de faire depuis 3 posts ...

et mieux vaut un div qu'un texteara pour deux raisons:

1) c'est plus 3wcment correct
2) le textarea est modifiable ...

[wincroc]

si tu mets 100 caractères il ne coupera pas le mot ...
regarde du coté de text-wrap ?
sinon un div dans chaque td, le css sur le td et le contenu dans le div ...

j'ai placé des div dans chaque td.
Je defini le width sur le td et pourtant la colonne s'elargit : http://www.wincroc.fr
je ne comprend rien !

[SpaceFrog]

as tu defini le style du div avec width et overflow:hidden ou auto ?

[wincroc]

j'ai vu où etait le probleme et c'est bizarre !
a l'initialisation de ma page, tous mes script pour la contruction de la table sont appelés.
La premiere methode, construit les blocs div avec la table des entetes de colonnes
la seconde methode ajoute les lignes dans la table qui sert de corps.

Dans la construction je definis la largeur de mes colonnes avec :

Code :

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

1
2
 
Element.setStyle(cellule,{"width":this.tailleTitresColonnes[i]});

mais en debuggant je m'apercois qu'a la fin de cette methode ma table est sans aucun style CSS et width de définis reellement. et c'est seulement a la fin de tous les scripts que les colonnes se redimensionne et que les images du fichier CSS arrivent.....
Alors pourquoi il faut attendre la chargement complet pour avoir les attributs de style ?
Car j'ai remarqué que ma fonction permettant de recuperer la largeur de chaque colonne recupere la largeur avant l'attribut "width" donc pas bon.

Je ne sais pas si je suis clair
Avez vous une idée ?

[SpaceFrog]

Code :

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

MonObjet.style.width=this.tailleTitresColonnes[i];

[Gatsu35]

Code :

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

MonObjet.style.width=this.tailleTitresColonnes[i];

Code :

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

MonObjet.style.width=this.tailleTitresColonnes[i]+"px";

On met toujours les unités lorsque l'on spécifie une hauteur/largeur ou autre (font par exemple)