Il existe plusieurs solutions pour afficher / masquer une colonne d'une table liste.
Soit la table liste TBL_1 avec un entête et 3 colonnes : On veut rendre visible / invisible la deuxième colonne
<table cols="3" id="TBL_1" width="75%" border="1" cellpadding="1" cellspacing="1"> <thead><tr> <td>Entete 1</td> <td>Entete 2</td> <td>Entete 3</td> </tr></thead> <tbody><adelia:tablelist name="TBL_1"> <tr> <td> </td> <td> </td> <td> </td> </tr> </adelia:tablelist></tbody> </table>
Solution 1
Encapsuler chaque cellule de la colonne à rendre visible / invisible par une balise condition
<table cols="3" id="TBL_1" width="75%" border="1" cellpadding="1" cellspacing="1"> <thead><tr> <td>Entete 1</td> <adelia:b_cond name="CND_HEADER_COL_2" /> <td>Entete 2</td> <adelia:e_cond /> <td>Entete 3</td> </tr></thead> <tbody><adelia:tablelist name="TBL_1"> <tr> <td> </td> <adelia:b_cond name="CND_COL_2" /> <td> </td> <adelia:e_cond /> <td> </td> </tr> </adelia:tablelist></tbody> </table>
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.
Donc pour rendre visible / invisible la colonne 2 par programme, il faut :
- Fixer une valeur pour CND_HEADER_COL_2,
- Fixer une valeur pour CND_COL_2 pour chaque ligne de TBL_1.
Avantage de cette solution :
- optimisation du flux HTML renvoyé au navigateur (seul le code HTML des colonnes visibles est renvoyé),
- simplicité de mise en oeuvre.
Inconvénient de cette solution :
- 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),
- Rendre visible / invisible la colonne 2 se fait obligatoirement coté serveur (donc implique un aller / retour serveur).
Solution 2
Utilisation de classes de style CSS
<table cols="3" id="TBL_1" width="75%" border="1" cellpadding="1" cellspacing="1" class="::TBL_1_CLASS"> <thead><tr> <td>Entete 1</td> <td class="col2">Entete 2</td> <td>Entete 3</td> </tr></thead> <tbody><adelia:tablelist name="TBL_1"> <tr> <td> </td> <td class="col2"> </td> <td> </td> </tr> </adelia:tablelist></tbody> </table>
Rajouter pour chaque cellule (balise TD) de la colonne 2 un attribut class avec comme valeur "col2".
Rajouter un attribut class à la balise TABLE de la table liste TBL_1 avec comme valeur une variable Adélia alpha TBL_1_CLASS
Rajouter dans la feuille de style associée au programme (ou dans une balise STYLE inline) la règle CSS suivante :
table.hideCol2 .col2 {
display : none;
}
Dans le code L4G, fixer la variable TBL_1_CLASS avec la valeur suivante :
- *BLANK pour rendre visible la colonne 2,
- "hideCol2" pour rendre invisible la colonne 2.
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.
Avantage de cette solution :
- code L4G plus simple et moins lourd (pas de parcours / modification de liste)
- aucune variable colonne de la liste mémoire rajoutée (pas d'augmentation mémoire),
- peut être entièrement fait coté navigateur en Javascript (donc pas d'aller / retour serveur pour rendre visible / invisible une colonne).
Inconvénient de cette solution :
- Le flux HTML renvoyé contient toutes les données de la table liste (y compris le code HTML des colonnes invisibles).
Solution 3
Utilisation de classes de style CSS sur la balise COL (ne fonctionne pas sous Chrome)
<table cols="3" id="TBL_1" width="75%" border="1" cellpadding="1" cellspacing="1"> <colgroup> <col /> <col class="::CLASS_COL_2"/> <col /> </colgroup> <thead><tr> <td>Entete 1</td> <td>Entete 2</td> <td>Entete 3</td> </tr></thead> <tbody><adelia:tablelist name="TBL_1"> <tr> <td> </td> <td> </td> <td> </td> </tr> </adelia:tablelist></tbody> </table>
Rajouter une balise COLGROUP dans laquelle on défini la classe CSS de la colonne 2.
Rajouter dans la feuille de style associée au programme (ou dans une balise STYLE inline) la règle CSS suivante :
.hideTBL_1_COL {
visibility:collapse;
}
Pour IE version inférieure à 8, définir cette classe dans un commentaire conditionnel (avec display à none):
<!--[if lte IE 7]>
<style>
.hideTBL_1_COL {
display:none;
}
</style>
<![endif]-->
Dans le code L4G, fixer la variable CLASS_COL_2 avec la valeur suivante :
- *BLANK pour rendre visible la colonne 2,
- "hideTBL_1_COL" pour rendre invisible la colonne 2.
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.
Avantage de cette solution :
- code L4G plus simple et moins lourd (pas de parcours / modification de liste)
- aucune variable colonne de la liste mémoire rajoutée (pas d'augmentation mémoire),
- peut être entièrement fait coté navigateur en Javascript (donc pas d'aller / retour serveur pour rendre visible / invisible une colonne),
- flux HTML retourné dans le cas d'un événement Ajax moins lourd (seulement la balise COLGROUP) par rapport à la solution 2.
Inconvénient de cette solution :
- Le flux HTML renvoyé contient toutes les données de la table liste (y compris le code HTML des colonnes invisibles),
- Pas supporté par Chrome (bug ?)
Articles connexes