Soit l'exemple suivant : une table liste TBL_2 qui contient une liste d'options pour l'achat d'une automobile :
- moteur (puissance),
- couleur carrosserie,
- couleur des sièges.
Cette liste contient 2 colonnes :
- CHO_1 pour le nom de l'option,
- CBX_1 pour la liste des options disponibles.
Pour chaque catégorie d'option, une liste de choix suivant doit etre disponible :
- moteur : 110 Ch, 150 Ch.
- couleur carrosserie : Bleu, Gris, Blanc,
- couleur sieges : Tissu noir, Tissu bleu, Cuir biege.
Comment faire pour que CBX_1 contienne uniquement la liste des choix précédement défini pour chaque option ?
Solution 1
Avoir dans la table liste autant de listes déroulantes que de catégories d’options et cacher les listes déroulantes ne correspondant pas à la catégorie.
Solution la plus simple a mettre en œuvre mais pas optimale au niveau mémoire (n listes en mémoire).
Voici la maquette HTML de l'exemple d'une table liste (TBL_2) représentant la liste des catégories d'options.
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Document sans titre</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <adelia:css_link/> </head> <body> <form name="COMBO_IN_TBL_2_FORM_1" id="COMBO_IN_TBL_2_FORM_1" method="post"> <table cols="2" id="TBL_2" width="75%" border="1" cellpadding="1" cellspacing="1"> <thead> <tr> <td>Nom de l'option</td> <td>Valeur de l'option</td> </tr> </thead> <tbody> <adelia:tablelist name="TBL_2"> <tr> <td><adelia:outputfield name="CHO_1" type="ALPHA" length="30" refc="false" /></td> <td><adelia:combobox type="ALPHA" length="15" ><select name="CBX_MOTEUR" id="CBX_MOTEUR" style="::DISPLAY_MOTEUR"></select></adelia:combobox> <adelia:combobox type="ALPHA" length="15"><select name="CBX_COUL_CAR" id="CBX_COUL_CAR" style="::DISPLAY_COUL_CAR"></select></adelia:combobox> <adelia:combobox type="ALPHA" length="15"><select name="CBX_COUL_SIE" id="CBX_COUL_SIE" style="::DISPLAY_COUL_SIE"></select></adelia:combobox> </td> </tr> </adelia:tablelist> </tbody> </table> </form> </body> </html>
Et voici le code L4G de chargement de la table liste :
* chargement de la table liste * Ligne catégorie Moteur cho_1 = 'Moteur' cbx_Moteur = '150 Ch' * afficher cbx_moteur et rendre invisible cbx_coul_car et cbx_coul_sie Display_moteur = *blank Display_coul_car = ‘display :none’ Display_coul_sie = ‘display:none’ inserer_elt tbl_2:liste * Ligne catégorie Couleur carrosserie cho_1 = 'couleur carrosserie' cbx_coul_car = 'Bleu' Display_moteur = ‘display :none’ Display_coul_car = *blank Display_coul_sie = ‘display:none’ inserer_elt tbl_2:liste * Ligne catégorie Couleur sièges cho_1 = 'Couleur des sièges' cbx_coul_sie = 'Tissu noir' Display_moteur = ‘display :none’ Display_coul_car = ‘display:none’ Display_coul_sie = *blank inserer_elt tbl_2:liste
Solution 2
On veut utiliser une seule liste déroulante pour l'ensemble des options disponible. Cette solution suppose :
1) que les valeurs d'options soient groupées par catégorie dans la liste déroulante. C'est à dire, par exemple, que les valeurs 110 Ch et 150 Ch soient contigues dans la liste associée à la liste déroulante.
2) qu'au moment de l'insertion d'une catégorie d'options dans la table liste associée, on connaisse la position de la première valeur d'option ainsi que la position de la dernière valeur d'option de la catégorie associée dans la liste déroulante. C'est à dire :
- qu'au moment de l'insertion de la catégorie "Moteur", la position de la première option (110 Ch) est 0 (les positions doivent commencer à 0) et la dernier est 1,
- qu'au moment de l'insertion de la catégorie "Couleur carrosserie", la position de la première option (Bleu) est 2 et la dernier est 4,
- qu'au moment de l'insertion de la catégorie "Couleur des sièges", la position de la première option (Tissu noir) est 5 et la dernier est 7,
Voici la maquette HTML de l'exemple d'une table liste (TBL_2) représentant la liste des catégories d'options. Cette table contient une liste déroulante (CBX_1) contenant les options.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<adelia:css_link/>
<script>
//<![CDATA[
function setSelectTagItems(rowIndex, firstIndex, lastIndex)
{
var cbxObj = document.getElementById(':lst:ID_WPAGE1:TBL_2:CBX_1:' + rowIndex), index;
// Suppression des options de la liste déroulante d'index supérieur a lastIndex
index = cbxObj.length - 1;
while (index > lastIndex)
{
cbxObj.remove(index);
index--;
}
// Suppression des options de la liste déroulante d'index inférieur a firstIndex
index = 0;
while (index < firstIndex)
{
cbxObj.remove(0);
index++;
}
}
//]]>
</script>
</head>
<body>
<form name="COMBO_IN_TBL_1_FORM_1" id="COMBO_IN_TBL_1_FORM_1" method="post">
<table cols="2" id="TBL_2" width="75%" border="1" cellpadding="1" cellspacing="1">
<thead>
<tr>
<td>Nom de l'option</td>
<td>Valeur de l'option</td>
</tr>
</thead>
<tbody>
<adelia:tablelist name="TBL_2">
<tr>
<td><adelia:outputfield name="CHO_1" type="ALPHA" length="30" refc="false" /></td>
<td><adelia:combobox type="ALPHA" length="15"><select name="CBX_1" id="CBX_1"></select></adelia:combobox><script>setSelectTagItems(::NUM_LIGNE(3),::FIRST(3),::LAST(3));</script></td>
</tr>
</adelia:tablelist>
</tbody>
</table>
</form>
</body>
</html>
Cette maquette rajoute 3 variables Adelia (définies comme faisant partie de la table liste TBL_2) :
- NUM_LIGNE : numéro de la ligne courante insérée (doit commencer à 0),
- FIRST : position dans CBX_1 de la première option de la catégorie insérée (doit commencer à 0),
- LAST : position dans CBX_1 de la dernière option de la catégorie insérée (doit commencer à 0).
Ces 3 variables sont des ALPHA(3) contenant des valeurs numériques donc attention si valeurs supérieur a 999...
Et voici le code L4G de chargement de la table liste :
* chargement de la liste déroulante contenant toutes * les options possibles cbx_1:valeur_courante = '110 Ch' inserer_elt cbx_1:liste cbx_1:valeur_courante = '150 Ch' inserer_elt cbx_1:liste cbx_1:valeur_courante = 'Bleu' inserer_elt cbx_1:liste cbx_1:valeur_courante = 'Gris' inserer_elt cbx_1:liste cbx_1:valeur_courante = 'Blanc' inserer_elt cbx_1:liste cbx_1:valeur_courante = 'Tissu noir' inserer_elt cbx_1:liste cbx_1:valeur_courante = 'Tissu bleu' inserer_elt cbx_1:liste cbx_1:valeur_courante = 'Cuir beige' inserer_elt cbx_1:liste * chargement de la table liste * Ligne catégorie Moteur * first est la position de la première option de la catégorie Moteur dans CBX_1 first = &num_alpha(0) * last est la position de la dernière option de la catégorie Moteur dans CBX_1 last = &num_alpha(1) cho_1 = 'Moteur' cbx_1 = '150 Ch' rang = &rang_elt(tbl_2:liste) * num_ligne : numéro de la ligne inserée (doit commencer à 0) num_ligne = &num_alpha(rang) inserer_elt tbl_2:liste * Ligne catégorie Couleur carrosserie first = &num_alpha(2) last = &num_alpha(4) cho_1 = 'couleur carrosserie' cbx_1 = 'Bleu' rang = &rang_elt(tbl_2:liste) num_ligne = &num_alpha(rang) inserer_elt tbl_2:liste * Ligne catégorie Couleur sièges first = &num_alpha(5) last = &num_alpha(7) cho_1 = 'Couleur des sièges' cbx_1 = 'Tissu noir' rang = &rang_elt(tbl_2:liste) num_ligne = &num_alpha(rang) inserer_elt tbl_2:liste
Solution 3
On utilise 3 listes déroulante pour chaqu'une des catégories mais ces 3 listes ne font pas partie de la table liste et sont invisibles.
Pour chaque ligne de la table liste, une liste deroulante en pur HTML est cree et la valeur de l'option selectionée est stockée dans un champ de saisie Adélia caché qui fait partie de la table liste.
Voici la maquette HTML de l'exemple :
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<adelia:css_link/>
<script>
//<![CDATA[
function cloneOptions (objSelectSrc, objSelectDest)
{
var lg = objSelectSrc.length, opt;
for (var i = 0; i < lg; i++)
{
opt = objSelectSrc.options[i];
if (document.all)
objSelectDest.options[i] = new Option(opt.text, opt.value);
else
objSelectDest.add (opt.cloneNode(true), null);
}
}
function loadSelectTag(rowIndex, cat)
{
var hidden = document.getElementById(':lst:ID_WPAGE3:TBL_2:CHS_VAL_OPT:' + rowIndex);
var tagTD = hidden.parentNode;
var tagSelect = tagTD.getElementsByTagName('select')[0];
// Chargement de chaque liste deroulante suivant la categorie
if (cat == 'M')
cloneOptions (document.getElementById('CBX_MOTEUR'), tagSelect);
else if (cat == 'C')
cloneOptions (document.getElementById('CBX_COUL_CAR'), tagSelect);
else // cat == 'S'
cloneOptions (document.getElementById('CBX_COUL_SIE'), tagSelect);
// Fixer l'option selectionnee en fonction de la valeur du champ cache CHS_VAL_OPT
var val = hidden.value;
if (val != '')
{
for (var i = 0; i < tagSelect.length; i++)
{
if (tagSelect.options[i].value == val)
{
tagSelect.options[i].selected = true;
break;
}
}
}
}
function updateHidden(objSelect, rowIndex)
{
// Mise a jour du champ cache en fonction de l'option selectionnee dans la liste deroulante
document.getElementById(':lst:ID_WPAGE3:TBL_2:CHS_VAL_OPT:' + rowIndex).value = objSelect.options[objSelect.selectedIndex].value;
}
//]]>
</script>
</head>
<body>
<p>Solution 3</p>
<form name="COMBO_IN_TBL_3_FORM_1" id="COMBO_IN_TBL_3_FORM_1" method="post">
<adelia:combobox type="ALPHA" length="15"><select name="CBX_MOTEUR" id="CBX_MOTEUR" style="display:none"></select></adelia:combobox>
<adelia:combobox type="ALPHA" length="15"><select name="CBX_COUL_CAR" id="CBX_COUL_CAR" style="display:none"></select></adelia:combobox>
<adelia:combobox type="ALPHA" length="15"><select name="CBX_COUL_SIE" id="CBX_COUL_SIE" style="display:none"></select></adelia:combobox>
<table cols="2" id="TBL_2" width="75%" border="1" cellpadding="1" cellspacing="1">
<thead>
<tr>
<td>Nom de l'option</td>
<td>Valeur de l'option</td>
</tr>
</thead>
<tbody>
<adelia:tablelist name="TBL_2">
<tr>
<td><adelia:outputfield name="CHO_1" type="ALPHA" length="30" refc="false" /></td>
<td><select onchange="updateHidden(this, ::ROW_INDEX(3))"></select><adelia:entryfield type="ALPHA" length="15"><input type="hidden" name="CHS_VAL_OPT" id="CHS_VAL_OPT"/></adelia:entryfield>
<script>loadSelectTag(::ROW_INDEX(3), '::CATEGORIE(1)')</script>
</td>
</tr>
</adelia:tablelist>
</tbody>
</table>
</form>
</body>
</html>
Et le code L4G correspondant :
* chargement des listes deroulantes contenant les options possibles cbx_moteur:valeur_courante = '110 Ch' inserer_elt cbx_moteur:liste cbx_moteur:valeur_courante = '150 Ch' inserer_elt cbx_moteur:liste cbx_coul_car:valeur_courante = 'Bleu' inserer_elt cbx_coul_car:liste cbx_coul_car:valeur_courante = 'Gris' inserer_elt cbx_coul_car:liste cbx_coul_car:valeur_courante = 'Blanc' inserer_elt cbx_coul_car:liste cbx_coul_sie:valeur_courante = 'Tissu noir' inserer_elt cbx_coul_sie:liste cbx_coul_sie:valeur_courante = 'Tissu bleu' inserer_elt cbx_coul_sie:liste cbx_coul_sie:valeur_courante = 'Cuir beige' inserer_elt cbx_coul_sie:liste * chargement de la table liste * Ligne categorie Moteur cho_1 = 'Moteur' chs_val_opt = '150 Ch' rang = &rang_elt(tbl_2:liste) * num_ligne : numero de la ligne inseree (doit commencer à 0) row_index = &num_alpha(rang) CATEGORIE = 'M' inserer_elt tbl_2:liste * Ligne categorie Couleur carrosserie cho_1 = 'couleur carrosserie' chs_val_opt = 'Bleu' rang = &rang_elt(tbl_2:liste) * num_ligne : numero de la ligne inseree (doit commencer à 0) row_index = &num_alpha(rang) CATEGORIE = 'C' inserer_elt tbl_2:liste * Ligne categorie Couleur sieges cho_1 = 'Couleur des sièges' chs_val_opt = 'Tissu noir' rang = &rang_elt(tbl_2:liste) * num_ligne : numero de la ligne inseree (doit commencer à 0) row_index = &num_alpha(rang) CATEGORIE = 'S' inserer_elt tbl_2:liste
Articles connexes