Discussion :

[6BerYeti]

Bonjour,

Je débute avec jQuery, et je cherchais un moyen d'afficher un tableau avec des informations de base, tout en cachant des informations détaillées qui apparaissent/disparaissent lorsque l'on clique sur une ligne.

J'ai trouvé un exemple très simple à mettre en oeuvre sur le site javascripttoolbox.

Le code est le suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$(function() {
	$('tr.parent')
		.css("cursor","pointer")
		.attr("title","Click to expand/collapse")
		.click(function(){
			$(this).siblings('.child-'+this.id).toggle();
		});
	$('tr[@class^=child-]').hide().children('td');
});

Mon problème est que les informations de base et suffisantes à l'essentiel des utilisateurs nécessitent une largeur x alors que l'affichage des détails impose une largeur y (y>x).
Je sais comment étendre la largeur des colonnes en ajoutant ceci :

Code :

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

1
2
3
 
 
			$(this).children('td').css("width","32em");

dans le bloc .click(function)

Je parviens ainsi à étendre la largeur des colonnes quand j'affiche les détails.
Mais je ne parviens pas à trouver une solution pour revenir à une taille inférieure quand je cache les détails.

Peut-être faudrait-il associer une fonction à exécuter au hide... mais je n'y suis pas parvenu.

Merci de votre aide.
J-L

[bewidia]

Toggle permet de facilement cacher ce qui est visible et inversement. Pour des opérations plus complexes (redimensionnement de colonne), à part gérer l'état d'ouverture (ouvert ou fermé) dans une variable et au clic, en fonction de l'état faire ci ou ça, je ne vois pas

Du genre

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
 
$(function() {
	$('tr.parent')
		.css("cursor","pointer")
		.attr("title","Click to expand/collapse")
		.click(function(){
                        if($(this).hasClass('ouvert')){
                            //si le TR est ouvert on le ferme
                            $(this).removeClass('ouvert');
 
                            //redimensionnement --
 
 
                            //cacher les fils
                            $(this).siblings('.child-'+this.id).hide();
                        }else{
                            //si il est fermé on l'ouvre
                            $(this).addClass('ouvert');
 
                           //redimensionnement ++
 
 
                               //montrer les fils
                             $(this).siblings('.child-'+this.id).show();
                        }
 
		});
	$('tr[@class^=child-]').hide().children('td');
});

[6BerYeti]

Super !
Merci beaucoup.
Ca marche, mais j'ai une difficulté supplémentaire, et un problème.

Difficulté :
Chacune de mes cellules peut avoir une classe différentes (.ok, .warn, ...etc), parmi 4.
Pour faire vite, j'ai recopié 4 fois le code de redimensionnement dans les 2 alternatives. C'est assez moche. , parce que si jamais j'ai d'autres classes ...
Curieusement j'ai trouvé une solution qui marche dans un cas (fermer) mais pas dans l'autre.

Code :

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

1
2
 
$(this).children('td').children().css("width","12em");

C'est-à-dire que si j'écris :

Code :

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

1
2
 
$(this).children('td').children().css("width","48em");

... ca marche pas !

Le problème :
Mon tableau (supposons qu'il ait la classe mon_tablo), et ses cellules ont des bordures définies comme suit:

Code :

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

1
2
3
4
.mon_tablo * {
 	border			: 2px ridgewhite;
 	border-collapse	: collapse ;
}

Les bordures sont conservées à l'ouverture, mais disparaissent à la fermeture...
Je ne comprends pas bien pourquoi...
Alors j'ai ajouté ceci :

Code :

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

$(this).children('td').css("border","2px ridge white");

Aussi bien en ouverture qu'en fermeture.

En fait, des fois ça marche et des fois non ... et je soupçonne un buug du navigateur (ff 3.5.3)...

Dès que j'ai un peu de temps, j'essaie une autre technique qui consisterait à avoir deux vraies classes css (open et close) dans mon fichier css, et utiliser la fonction toggleClass.
Bien évidemment, je ferai un retour ici.

J-L