table avec recherche sur colonne

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.

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

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

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

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

sinon :king:

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

Code:

---

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 ?

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

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 ?

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

dans mon fichier CSS, j'ai mis :

Code:

---

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.

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

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

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

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 ?

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

Citation:

---

Envoyé par 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 ...

---

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 !

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

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:

---

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 ?

Code:

---

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

---

Citation:

---

Envoyé par SpaceFrog

Code:

---

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

---

---

Code:

---

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)

Citation:

---

Envoyé par SpaceFrog

Code:

---

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

---

---

le pb reste le meme, c'est juste la syntaxe qui change non ?
enfin, je modifier mon code et c'est pareil

en fait si je defini mes colonne avec des px, je recupere bien la bonne dimension en javascript quand je fais :

Code:

---

1 2	this.tailleColonnes[i]=parseInt(document.getElementById(this.id+'_col'+i).offsetWidth)-3 + "px";

---

mais si je défini mes colonnes en % alors la valeur retourné en completement fausse par exemple mon 20% me revoi 101px alors qu'a l'ecran ca fait au moins 300px

regarde du coté de offsetWidth ...

je vais revoir tout mon code pour faure comme dans ton exemple donné au début, avec une colonne supplémentaire pour la largeur de l'ascensseur.
Ce qui m'avait pas plu, c'est qu'on devait définir des largeur en PX et non en %
mais tampis

si mes souvenirs sont bons je n'avais pas ajouté cette colonne par simpel plaisir :mouarf:

oui, ca ne gere pas les dimensions en %

non mais les largeurs sont si ma mémoire ne me fait pas défaut recalculées ...
il suffit de relancer la focntion de redimensionnement du tableau et de ses colonnes sur le onresize ...

comprend pas tout là,
comment dois je faire si je souhaite que mon tableau fasse 70% de la fenetre
avec 5 colonnes de 20% ? le onresize n'intervient pas là si ?:cry:

pas au moment de la création ...
il faut juste chopper sur le onload la largeur de la fenêtre et y appliquer ton 70% pour le tableau et les autres pourcentages pour les colonnes ...