Masquer des colonnes dans un tableau

**fornorst** · 22/04/2006, 20h18

Bonjour à tous,

dans le cadre du développement d'un outil de reporting, je suis confronté à un souci de lisibilité des informations. Pour résumer, j'ai une page regroupant une liste des projets (informatiques) de l'entreprise. A chacun de ses projets est associé une liste de composants logiciels (variables selon les projets et évolutibles dans le temps). Pour chacun de ces composants, différentes informations sont fournies (doc de design, doc d'installation, rapport de test unitaires, taux de couverture des test unitaires, complexité du code, changelog, ...). Ces informations sont regroupées par groupe (documentation, métrique de qualité, divers, ...).

Toutes ces infos sont regroupés dans des tableaux. Pour des raisons de lisibilité et de performance à la génération, chaque projet possède son propre tableau (bien que la structure de chaque tableau soit identique). Dans chaque cellule (regroupement entre un composant logiciel et une information), une icône est affichée. Elle représente un indicateur sur la métrique (présente/absente, bonne/mauvaise, ...).

Comme vous pouvez vous en douter, le tableau commence à dépasser largement en largeur (même en 1280x800

). La solution envisagée est de pouvoir collapser un groupe, ce qui permettrait de ne plus afficher qu'une icone de résumé pour le groupe et non plus 2,3 ou 7 icônes. Pour des raisons de volumétrie et sécurité, cette page est statique et ne peut donc contenir aucune clause dynamique à exécuter côté serveur (jsp ou php par exemple). La seule solution pour collapser les cellules reste donc le javascript.

Histoire d'illustrer ce que je souhaite réaliser, voici une image présentant le tableau initial (avec la notion de groupe d'informations, d'informations et de composants) :

Pouvez-vous m'expliquer (ou au moins me donner des pistes sur la façon de faire celà ?), sachant que dans ma page, je n'ai pas 1 mais une multitude de tableaux de ce genre (une quinzaine environ) mais qu'ils ont tous la même structure, connue à l'avance ? D'avance merci à tous ceux qui auront pris la peine de lire jusqu'au bout et encore plus à ceux qui auront pu m'aider !

Rémi

**Swoög** · 22/04/2006, 21h14

Salut !

j'aurais bien une idée sur la façon de faire ça...

il faudrait que toutes les colonnes (détails et résumés) soient générées en (X)HTML

ensuite, il faudrait nommées spécialement plusieurs balises si possible, exemple :

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
<table id="doc_X">
<th>
<td>doc +/-</td>
<td>mertic1 +/-</td>
<td>metric2 +/-</td>
</th>
<tr>
<td name="doc_resume">&nbsp;</td>
<td name="doc_detail">Doc 1</td>
<td name="doc_detail">Doc 2</td>
<td name="doc_detail">Doc 3</td>
.
.
.
</tr>
<!-- pareil pour les données -->

j'espère que c'est clair

ensuite : tu modifies le <th> comme ça :

Code :

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

1
2
3
4
5
<th>
<td>Doc <span name="doc_switch" onclick="switch('doc_X', 'doc')">+</span></td>
<td>metric 1 <span name="met1_switch" onclick="switch('doc_X', 'met1')">+</span></td>
<td>metric 2 <span name="met2_switch" onclick="switch('doc_X', 'met2')">+</span></td>
</th>

enfin le javascript :

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
function switch(var ID, var name)
{
   var table = document.getElementById(ID);
   var detail = table.getElementsByName(name + "_detail");
   var resume = table.getElementsByName(name + "_resume");
   var span = table.getElementsByName(name + "_switch");
 
   if(detail[0].style.display == "table-cell")
   {
      for(var i = 0; i &lt; detail.length; ++i) detail[i].style.display = "none";
      for(var i = 0; i &lt; resume.length; ++i) resume[i].style.display = "table-cell";
      span[0].elements[0].text = "-"; /* chuis pas sûr de cette ligne ! */
   } else {
      for(var i = 0; i &lt; detail.length; ++i) detail[i].style.display = "table-cell";
      for(var i = 0; i &lt; resume.length; ++i) resume[i].style.display = "none";
      span[0].elements[0].text = "+"; /* chuis pas sûr de cette ligne ! */
   }
}

Bon je sais pas si c'est super clair... dis moi si il y a un* truc que tu comprends pas

**fornorst** · 22/04/2006, 23h16

C'est très clair, je vais essayer ça dès demain et voir ce que ça peut donner en essayant de faire afficher la colonne de résumé (il ne me semble pas que ta solution la fasse apparaitre ou alors je n'ai pas tout compris, ce qui ne m'étonnerait pas des masses

).

Pour le span avec le + et le -, je vais faire plus simple en mettant une image et en changeant le src de la balise img.

En tout cas, un grand merci pour cette solution qui devrait beaucoup m'aider !!

**Swoög** · 22/04/2006, 23h17

Je t'en prie, encore faut-il que ça marche

**fornorst** · 23/04/2006, 01h56

Ok, j'ai essayé et j'ai un problème, je ne peux pas cliquer sur le +. J'ai essayé avec ta technique avec le span et aussi avec ce que je ferai très probablement en version finale avec une image. Voici le code (j'ai bien entendu les fichiers plus.jpg et moins.jpg en local

) :

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
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
<html>
<head>
<title>Test Tab1
</title>
</head>
<script language="javascript">
function switch(var ID, var name)
{
   var table = document.getElementById(ID);
   var detail = table.getElementsByName(name + "_detail");
   var resume = table.getElementsByName(name + "_resume");
   var span = table.getElementsByName(name + "_switch");
 
   if(detail[0].style.display == "table-cell")
   {
      for(var i = 0; i &lt; detail.length; ++i) detail[i].style.display = "none";
      for(var i = 0; i &lt; resume.length; ++i) resume[i].style.display = "table-cell";
      span[0].src = "moins.jpg"; /* chuis pas sûr de cette ligne ! */
   } else {
      for(var i = 0; i &lt; detail.length; ++i) detail[i].style.display = "table-cell";
      for(var i = 0; i &lt; resume.length; ++i) resume[i].style.display = "none";
      span[0].elements[0].text = "plus.jpg"; /* chuis pas sûr de cette ligne ! */
   }
}
</script>
<body>
<h1>Table initiale</h1>
<table width="100%" border="1" id="doc_X">
  <tr>
    <td rowspan="2">Nom</td>
    <td colspan="6">Doc <img src="plus.jpg" name="doc_switch" onclick="switch('doc_X', 'doc')" /></td>
    <td colspan="2">metric 1 <span name="met1_switch" onclick="switch('doc_X', 'ms')">+</span></td>
    <td colspan="7">metric 2 <span name="met2_switch" onclick="switch('doc_X', 'mc')">+</span></td>
  </tr>
  <tr>
    <td width="6%" name="doc_detail">Doc1</td>
    <td width="6%" name="doc_detail">Doc2</td>
    <td width="6%" name="doc_detail">Doc3</td>
    <td width="6%" name="doc_detail">Doc4</td>
    <td width="6%" name="doc_detail">Doc5</td>
    <td width="6%" name="doc_detail">Doc6</td>
    <td width="6%" name="ms_detail">MS1</td>
    <td width="6%" name="ms_detail">MS2</td>
    <td width="6%" name="mc_detail">MC1</td>
    <td width="6%" name="mc_detail">MC2</td>
    <td width="6%" name="mc_detail">MC3</td>
    <td width="6%" name="mc_detail">MC4</td>
    <td width="6%" name="mc_detail">MC5</td>
    <td width="6%" name="mc_detail">MC6</td>
    <td width="6%" name="mc_detail">MC7</td>
  </tr>
  <tr>
    <td>Composant1</td>
    <td name="doc_detail">1</td>
    <td name="doc_detail">1</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">1</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">1</td>
    <td name="ms_detail">1</td>
    <td name="ms_detail">1</td>
    <td name="mc_detail">0</td>
    <td name="mc_detail">0</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">0</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">1</td>
  </tr>
  <tr>
    <td>Composant2</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">1</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">1</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">0</td>
    <td name="ms_detail">1</td>
    <td name="ms_detail">1</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">0</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">1</td>
  </tr>
  <tr>
    <td>Composant3</td>
    <td name="doc_detail">1</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">0</td>
    <td name="doc_detail">1</td>
    <td name="ms_detail">0</td>
    <td name="ms_detail">1</td>
    <td name="mc_detail">0</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">0</td>
    <td name="mc_detail">0</td>
    <td name="mc_detail">0</td>
    <td name="mc_detail">1</td>
    <td name="mc_detail">1</td>
  </tr>
</table>
</body>
</html>

As-tu une idée sur l'origine de ce souci ? A part ça, ta solution parait vraiment bonne et devrait me permettre d'arriver sans trop de difficultés à la résolution de mon problème. Encore merci.

**Swoög** · 23/04/2006, 13h38

ok, à priori y'a 2/3 trucs qui marchait pas ^^

j'ai joint le code qui marche ^^

Masquer des colonnes dans un tableau

JavaScript

Vue hybride

Discussions similaires

Partager

Partager