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)