Aller au contenu
Modifié par Julien EYMERY le 2015/06/30 11:05
Afficher les derniers auteurs
1 Il existe plusieurs solutions pour afficher / masquer une colonne d'une table liste.
2
3 Soit la table liste TBL_1 avec un entête et 3 colonnes : On veut rendre visible / invisible la deuxième colonne
4
5
6 {{code language="xml" language="xml"}}
7 <table cols="3" id="TBL_1" width="75%" border="1" cellpadding="1" cellspacing="1">
8 <thead><tr>
9 <td>Entete 1</td>
10 <td>Entete 2</td>
11 <td>Entete 3</td>
12 </tr></thead>
13 <tbody><adelia:tablelist name="TBL_1">
14 <tr>
15 <td>&nbsp;</td>
16 <td>&nbsp;</td>
17 <td>&nbsp;</td>
18 </tr>
19 </adelia:tablelist></tbody>
20 </table>
21 {{/code}}
22
23 (((
24 == Solution 1 ==
25 )))
26
27 Encapsuler chaque cellule de la colonne à rendre visible / invisible par une balise condition
28
29
30 {{code language="xml" language="xml"}}
31 <table cols="3" id="TBL_1" width="75%" border="1" cellpadding="1" cellspacing="1">
32 <thead><tr>
33 <td>Entete 1</td>
34 <adelia:b_cond name="CND_HEADER_COL_2" />
35 <td>Entete 2</td>
36 <adelia:e_cond />
37 <td>Entete 3</td>
38 </tr></thead>
39 <tbody><adelia:tablelist name="TBL_1">
40 <tr>
41 <td>&nbsp;</td>
42 <adelia:b_cond name="CND_COL_2" />
43 <td>&nbsp;</td>
44 <adelia:e_cond />
45 <td>&nbsp;</td>
46 </tr>
47 </adelia:tablelist></tbody>
48 </table>
49 {{/code}}
50
51
52 La variable booléenne CND_HEADER_COL_2 est de portée "page" mais la variable CND_COL_2 devient une variable colonne de la table liste TBL_1.
53
54 Donc pour rendre visible / invisible la colonne 2 par programme, il faut :
55 - Fixer une valeur pour CND_HEADER_COL_2,
56 - Fixer une valeur pour CND_COL_2 pour chaque ligne de TBL_1.
57
58 Avantage de cette solution :
59 - optimisation du flux HTML renvoyé au navigateur (seul le code HTML des colonnes visibles est renvoyé),
60 - simplicité de mise en oeuvre.
61
62 Inconvénient de cette solution :
63 - Rajout d'une colonne booléenne (CND_COL_2) dans la liste mémoire associée à TBL_1 (augmentation consommation mémoire du serveur Web),
64 - Rendre visible / invisible la colonne 2 se fait obligatoirement coté serveur (donc implique un aller / retour serveur).
65 (((
66 == Solution 2 ==
67 )))
68
69 Utilisation de classes de style CSS
70
71
72 {{code language="xml" language="xml"}}
73 <table cols="3" id="TBL_1" width="75%" border="1" cellpadding="1" cellspacing="1" class="::TBL_1_CLASS">
74 <thead><tr>
75 <td>Entete 1</td>
76 <td class="col2">Entete 2</td>
77 <td>Entete 3</td>
78 </tr></thead>
79 <tbody><adelia:tablelist name="TBL_1">
80 <tr>
81 <td>&nbsp;</td>
82 <td class="col2">&nbsp;</td>
83 <td>&nbsp;</td>
84 </tr>
85 </adelia:tablelist></tbody>
86 </table>
87 {{/code}}
88
89
90 Rajouter pour chaque cellule (balise TD) de la colonne 2 un attribut class avec comme valeur "col2".
91 Rajouter un attribut class à la balise TABLE de la table liste TBL_1 avec comme valeur une variable Adélia alpha TBL_1_CLASS
92 Rajouter dans la feuille de style associée au programme (ou dans une balise STYLE inline) la règle CSS suivante :
93
94
95 {{code language="css" language="css"}}
96 table.hideCol2 .col2 {
97 display : none;
98 }
99 {{/code}}
100
101
102 Dans le code L4G, fixer la variable TBL_1_CLASS avec la valeur suivante :
103 - *BLANK pour rendre visible la colonne 2,
104 - "hideCol2" pour rendre invisible la colonne 2.
105
106 Note : Si le code L4G ci-dessus s'exécute dans un événement Ajax alors il faut encapsuler la balise TABLE d'une aire de rafraîchissement et forcer l'affichage (avec l'ordre FORCE_AFFICHAGE) de cette aire.
107
108 Avantage de cette solution :
109 - code L4G plus simple et moins lourd (pas de parcours / modification de liste)
110 - aucune variable colonne de la liste mémoire rajoutée (pas d'augmentation mémoire),
111 - peut être entièrement fait coté navigateur en Javascript (donc pas d'aller / retour serveur pour rendre visible / invisible une colonne).
112
113 Inconvénient de cette solution :
114 - Le flux HTML renvoyé contient toutes les données de la table liste (y compris le code HTML des colonnes invisibles).
115 (((
116 ==
117 Solution 3 ==
118 )))
119
120 Utilisation de classes de style CSS sur la balise COL (ne fonctionne pas sous Chrome)
121
122
123 {{code language="xml" language="xml"}}
124 <table cols="3" id="TBL_1" width="75%" border="1" cellpadding="1" cellspacing="1">
125 <colgroup>
126 <col />
127 <col class="::CLASS_COL_2"/>
128 <col />
129 </colgroup>
130 <thead><tr>
131 <td>Entete 1</td>
132 <td>Entete 2</td>
133 <td>Entete 3</td>
134 </tr></thead>
135 <tbody><adelia:tablelist name="TBL_1">
136 <tr>
137 <td>&nbsp;</td>
138 <td>&nbsp;</td>
139 <td>&nbsp;</td>
140 </tr>
141 </adelia:tablelist></tbody>
142 </table>
143 {{/code}}
144
145
146 Rajouter une balise COLGROUP dans laquelle on défini la classe CSS de la colonne 2.
147 Rajouter dans la feuille de style associée au programme (ou dans une balise STYLE inline) la règle CSS suivante :
148
149
150 {{code language="css" language="css"}}
151 .hideTBL_1_COL {
152 visibility:collapse;
153 }
154 {{/code}}
155
156
157 Pour IE version inférieure à 8, définir cette classe dans un commentaire conditionnel (avec display à none):
158
159
160 {{code language="css" language="css"}}
161 <!--[if lte IE 7]>
162 <style>
163 .hideTBL_1_COL {
164 display:none;
165 }
166 </style>
167 <![endif]-->
168 {{/code}}
169
170
171 Dans le code L4G, fixer la variable CLASS_COL_2 avec la valeur suivante :
172 - *BLANK pour rendre visible la colonne 2,
173 - "hideTBL_1_COL" pour rendre invisible la colonne 2.
174
175 Note : Si le code L4G ci-dessus s'exécute dans un événement Ajax alors il faut encapsuler la balise COLGROUP d'une aire de rafraîchissement et forcer l'affichage (avec l'ordre FORCE_AFFICHAGE) de cette aire.
176
177 Avantage de cette solution :
178 - code L4G plus simple et moins lourd (pas de parcours / modification de liste)
179 - aucune variable colonne de la liste mémoire rajoutée (pas d'augmentation mémoire),
180 - peut être entièrement fait coté navigateur en Javascript (donc pas d'aller / retour serveur pour rendre visible / invisible une colonne),
181 - flux HTML retourné dans le cas d'un événement Ajax moins lourd (seulement la balise COLGROUP) par rapport à la solution 2.
182
183 Inconvénient de cette solution :
184 - Le flux HTML renvoyé contient toutes les données de la table liste (y compris le code HTML des colonnes invisibles),
185 - Pas supporté par Chrome (bug ?)
186 (((
187 ==
188 Articles connexes ==
189 )))
190
191 Les articles connexes apparaissent ici en fonction des étiquettes que vous avez sélectionnées. Cliquez pour modifier la macro et ajouter ou modifier des étiquettes.
192
193 {{liveData sort="doc.date:desc" source="liveTable" properties="doc.title,doc.date,doc.author" description="Recently updated" limit="5" filters="tag=web liste" sourceParameters="translationPrefix=platform.index."}}{{/liveData}}
194