Skip to Content
Last modified by Julien EYMERY on 2015/07/06 10:46
Show last authors
1 Soit l'exemple suivant : une table liste TBL_2 qui contient une liste d'options pour l'achat d'une automobile :
2 - moteur (puissance),
3 - couleur carrosserie,
4 - couleur des sièges.
5
6 Cette liste contient 2 colonnes :
7 - CHO_1 pour le nom de l'option,
8 - CBX_1 pour la liste des options disponibles.
9
10 Pour chaque catégorie d'option, une liste de choix suivant doit etre disponible :
11 - moteur : 110 Ch, 150 Ch.
12 - couleur carrosserie : Bleu, Gris, Blanc,
13 - couleur sieges : Tissu noir, Tissu bleu, Cuir biege.
14
15 Comment faire pour que CBX_1 contienne uniquement la liste des choix précédement défini pour chaque option ?
16 (((
17 ==
18 Solution 1 ==
19 )))
20
21
22 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.
23
24 Solution la plus simple a mettre en œuvre mais pas optimale au niveau mémoire (n listes en mémoire).
25
26 Voici la maquette HTML de l'exemple d'une table liste (TBL_2) représentant la liste des catégories d'options.
27
28
29
30 {{code language="xml" language="xml"}}
31 <?xml version="1.0" encoding="iso-8859-1"?>
32 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
33 <html xmlns="http://www.w3.org/1999/xhtml">
34 <head>
35 <title>Document sans titre</title>
36 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
37 <adelia:css_link/>
38 </head>
39
40 <body>
41 <form name="COMBO_IN_TBL_2_FORM_1" id="COMBO_IN_TBL_2_FORM_1" method="post">
42 <table cols="2" id="TBL_2" width="75%" border="1" cellpadding="1" cellspacing="1">
43 <thead>
44 <tr>
45 <td>Nom de l'option</td>
46 <td>Valeur de l'option</td>
47 </tr>
48 </thead>
49 <tbody>
50 <adelia:tablelist name="TBL_2">
51 <tr>
52 <td><adelia:outputfield name="CHO_1" type="ALPHA" length="30" refc="false" /></td>
53 <td><adelia:combobox type="ALPHA" length="15" ><select name="CBX_MOTEUR" id="CBX_MOTEUR" style="::DISPLAY_MOTEUR"></select></adelia:combobox>
54 <adelia:combobox type="ALPHA" length="15"><select name="CBX_COUL_CAR" id="CBX_COUL_CAR" style="::DISPLAY_COUL_CAR"></select></adelia:combobox>
55 <adelia:combobox type="ALPHA" length="15"><select name="CBX_COUL_SIE" id="CBX_COUL_SIE" style="::DISPLAY_COUL_SIE"></select></adelia:combobox>
56 </td>
57 </tr>
58 </adelia:tablelist>
59 </tbody>
60 </table>
61 </form>
62 </body>
63 </html>
64 {{/code}}
65
66
67
68
69 Et voici le code L4G de chargement de la table liste :
70
71
72
73 {{code language="none"}}
74 * chargement de la table liste
75 * Ligne catégorie Moteur
76 cho_1 = 'Moteur'
77 cbx_Moteur = '150 Ch'
78 * afficher cbx_moteur et rendre invisible cbx_coul_car et cbx_coul_sie
79 Display_moteur = *blank
80 Display_coul_car = ‘display :none’
81 Display_coul_sie = ‘display:none’
82 inserer_elt tbl_2:liste
83
84 * Ligne catégorie Couleur carrosserie
85 cho_1 = 'couleur carrosserie'
86 cbx_coul_car = 'Bleu'
87 Display_moteur = ‘display :none’
88 Display_coul_car = *blank
89 Display_coul_sie = ‘display:none’
90 inserer_elt tbl_2:liste
91
92 * Ligne catégorie Couleur sièges
93 cho_1 = 'Couleur des sièges'
94 cbx_coul_sie = 'Tissu noir'
95 Display_moteur = ‘display :none’
96 Display_coul_car = ‘display:none’
97 Display_coul_sie = *blank
98 inserer_elt tbl_2:liste
99 {{/code}}
100
101 (((
102 == Solution 2 ==
103 )))
104
105
106 On veut utiliser une seule liste déroulante pour l'ensemble des options disponible. Cette solution suppose :
107
108 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.
109
110 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 :
111 - 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,
112 - 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,
113 - 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,
114
115 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.
116
117
118
119 {{code language="xml" language="xml"}}
120 <?xml version="1.0" encoding="iso-8859-1"?>
121 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
122 <html xmlns="http://www.w3.org/1999/xhtml">
123 <head>
124 <title>Document sans titre</title>
125 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
126 <adelia:css_link/>
127 <script>
128 //<![CDATA[
129 function setSelectTagItems(rowIndex, firstIndex, lastIndex)
130 {
131 var cbxObj = document.getElementById(':lst:ID_WPAGE1:TBL_2:CBX_1:' + rowIndex), index;
132
133 // Suppression des options de la liste déroulante d'index supérieur a lastIndex
134 index = cbxObj.length - 1;
135 while (index > lastIndex)
136 {
137 cbxObj.remove(index);
138 index--;
139 }
140 // Suppression des options de la liste déroulante d'index inférieur a firstIndex
141 index = 0;
142 while (index < firstIndex)
143 {
144 cbxObj.remove(0);
145 index++;
146 }
147 }
148 //]]>
149 </script>
150 </head>
151
152 <body>
153 <form name="COMBO_IN_TBL_1_FORM_1" id="COMBO_IN_TBL_1_FORM_1" method="post">
154 <table cols="2" id="TBL_2" width="75%" border="1" cellpadding="1" cellspacing="1">
155 <thead>
156 <tr>
157 <td>Nom de l'option</td>
158 <td>Valeur de l'option</td>
159 </tr>
160 </thead>
161 <tbody>
162 <adelia:tablelist name="TBL_2">
163 <tr>
164 <td><adelia:outputfield name="CHO_1" type="ALPHA" length="30" refc="false" /></td>
165 <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>
166 </tr>
167 </adelia:tablelist>
168 </tbody>
169 </table>
170 </form>
171 </body>
172 </html>
173 {{/code}}
174
175
176
177
178 Cette maquette rajoute 3 variables Adelia (définies comme faisant partie de la table liste TBL_2) :
179 - NUM_LIGNE : numéro de la ligne courante insérée (doit commencer à 0),
180 - FIRST : position dans CBX_1 de la première option de la catégorie insérée (doit commencer à 0),
181 - LAST : position dans CBX_1 de la dernière option de la catégorie insérée (doit commencer à 0).
182
183 Ces 3 variables sont des ALPHA(3) contenant des valeurs numériques donc attention si valeurs supérieur a 999...
184
185 Et voici le code L4G de chargement de la table liste :
186
187
188
189 {{code language="none"}}
190 * chargement de la liste déroulante contenant toutes
191 * les options possibles
192 cbx_1:valeur_courante = '110 Ch'
193 inserer_elt cbx_1:liste
194 cbx_1:valeur_courante = '150 Ch'
195 inserer_elt cbx_1:liste
196 cbx_1:valeur_courante = 'Bleu'
197 inserer_elt cbx_1:liste
198 cbx_1:valeur_courante = 'Gris'
199 inserer_elt cbx_1:liste
200 cbx_1:valeur_courante = 'Blanc'
201 inserer_elt cbx_1:liste
202 cbx_1:valeur_courante = 'Tissu noir'
203 inserer_elt cbx_1:liste
204 cbx_1:valeur_courante = 'Tissu bleu'
205 inserer_elt cbx_1:liste
206 cbx_1:valeur_courante = 'Cuir beige'
207 inserer_elt cbx_1:liste
208
209 * chargement de la table liste
210 * Ligne catégorie Moteur
211 * first est la position de la première option de la catégorie Moteur dans CBX_1
212 first = &num_alpha(0)
213 * last est la position de la dernière option de la catégorie Moteur dans CBX_1
214 last = &num_alpha(1)
215 cho_1 = 'Moteur'
216 cbx_1 = '150 Ch'
217 rang = &rang_elt(tbl_2:liste)
218 * num_ligne : numéro de la ligne inserée (doit commencer à 0)
219 num_ligne = &num_alpha(rang)
220 inserer_elt tbl_2:liste
221
222 * Ligne catégorie Couleur carrosserie
223 first = &num_alpha(2)
224 last = &num_alpha(4)
225 cho_1 = 'couleur carrosserie'
226 cbx_1 = 'Bleu'
227 rang = &rang_elt(tbl_2:liste)
228 num_ligne = &num_alpha(rang)
229 inserer_elt tbl_2:liste
230
231 * Ligne catégorie Couleur sièges
232 first = &num_alpha(5)
233 last = &num_alpha(7)
234 cho_1 = 'Couleur des sièges'
235 cbx_1 = 'Tissu noir'
236 rang = &rang_elt(tbl_2:liste)
237 num_ligne = &num_alpha(rang)
238 inserer_elt tbl_2:liste
239 {{/code}}
240
241 (((
242 == Solution 3 ==
243 )))
244
245 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.
246 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.
247
248 Voici la maquette HTML de l'exemple :
249
250
251
252 {{code language="xml" language="xml"}}
253 <?xml version="1.0" encoding="iso-8859-1"?>
254 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
255 <html xmlns="http://www.w3.org/1999/xhtml">
256 <head>
257 <title>Document sans titre</title>
258 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
259 <adelia:css_link/>
260 <script>
261 //<![CDATA[
262 function cloneOptions (objSelectSrc, objSelectDest)
263 {
264 var lg = objSelectSrc.length, opt;
265 for (var i = 0; i < lg; i++)
266 {
267 opt = objSelectSrc.options[i];
268 if (document.all)
269 objSelectDest.options[i] = new Option(opt.text, opt.value);
270 else
271 objSelectDest.add (opt.cloneNode(true), null);
272 }
273 }
274
275 function loadSelectTag(rowIndex, cat)
276 {
277 var hidden = document.getElementById(':lst:ID_WPAGE3:TBL_2:CHS_VAL_OPT:' + rowIndex);
278 var tagTD = hidden.parentNode;
279 var tagSelect = tagTD.getElementsByTagName('select')[0];
280
281 // Chargement de chaque liste deroulante suivant la categorie
282 if (cat == 'M')
283 cloneOptions (document.getElementById('CBX_MOTEUR'), tagSelect);
284 else if (cat == 'C')
285 cloneOptions (document.getElementById('CBX_COUL_CAR'), tagSelect);
286 else // cat == 'S'
287 cloneOptions (document.getElementById('CBX_COUL_SIE'), tagSelect);
288
289 // Fixer l'option selectionnee en fonction de la valeur du champ cache CHS_VAL_OPT
290 var val = hidden.value;
291 if (val != '')
292 {
293 for (var i = 0; i < tagSelect.length; i++)
294 {
295 if (tagSelect.options[i].value == val)
296 {
297 tagSelect.options[i].selected = true;
298 break;
299 }
300 }
301 }
302 }
303
304 function updateHidden(objSelect, rowIndex)
305 {
306 // Mise a jour du champ cache en fonction de l'option selectionnee dans la liste deroulante
307 document.getElementById(':lst:ID_WPAGE3:TBL_2:CHS_VAL_OPT:' + rowIndex).value = objSelect.options[objSelect.selectedIndex].value;
308 }
309 //]]>
310 </script>
311 </head>
312
313 <body>
314 <p>Solution 3</p>
315 <form name="COMBO_IN_TBL_3_FORM_1" id="COMBO_IN_TBL_3_FORM_1" method="post">
316 <adelia:combobox type="ALPHA" length="15"><select name="CBX_MOTEUR" id="CBX_MOTEUR" style="display:none"></select></adelia:combobox>
317 <adelia:combobox type="ALPHA" length="15"><select name="CBX_COUL_CAR" id="CBX_COUL_CAR" style="display:none"></select></adelia:combobox>
318 <adelia:combobox type="ALPHA" length="15"><select name="CBX_COUL_SIE" id="CBX_COUL_SIE" style="display:none"></select></adelia:combobox>
319 <table cols="2" id="TBL_2" width="75%" border="1" cellpadding="1" cellspacing="1">
320 <thead>
321 <tr>
322 <td>Nom de l'option</td>
323 <td>Valeur de l'option</td>
324 </tr>
325 </thead>
326 <tbody>
327 <adelia:tablelist name="TBL_2">
328 <tr>
329 <td><adelia:outputfield name="CHO_1" type="ALPHA" length="30" refc="false" /></td>
330 <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>
331 <script>loadSelectTag(::ROW_INDEX(3), '::CATEGORIE(1)')</script>
332 </td>
333 </tr>
334 </adelia:tablelist>
335 </tbody>
336 </table>
337 </form>
338 </body>
339 </html>
340 {{/code}}
341
342
343
344
345 Et le code L4G correspondant :
346
347
348
349 {{code language="none"}}
350 * chargement des listes deroulantes contenant les options possibles
351 cbx_moteur:valeur_courante = '110 Ch'
352 inserer_elt cbx_moteur:liste
353 cbx_moteur:valeur_courante = '150 Ch'
354 inserer_elt cbx_moteur:liste
355
356 cbx_coul_car:valeur_courante = 'Bleu'
357 inserer_elt cbx_coul_car:liste
358 cbx_coul_car:valeur_courante = 'Gris'
359 inserer_elt cbx_coul_car:liste
360 cbx_coul_car:valeur_courante = 'Blanc'
361 inserer_elt cbx_coul_car:liste
362
363 cbx_coul_sie:valeur_courante = 'Tissu noir'
364 inserer_elt cbx_coul_sie:liste
365 cbx_coul_sie:valeur_courante = 'Tissu bleu'
366 inserer_elt cbx_coul_sie:liste
367 cbx_coul_sie:valeur_courante = 'Cuir beige'
368 inserer_elt cbx_coul_sie:liste
369
370 * chargement de la table liste
371 * Ligne categorie Moteur
372 cho_1 = 'Moteur'
373 chs_val_opt = '150 Ch'
374 rang = &rang_elt(tbl_2:liste)
375 * num_ligne : numero de la ligne inseree (doit commencer à 0)
376 row_index = &num_alpha(rang)
377 CATEGORIE = 'M'
378 inserer_elt tbl_2:liste
379
380 * Ligne categorie Couleur carrosserie
381 cho_1 = 'couleur carrosserie'
382 chs_val_opt = 'Bleu'
383 rang = &rang_elt(tbl_2:liste)
384 * num_ligne : numero de la ligne inseree (doit commencer à 0)
385 row_index = &num_alpha(rang)
386 CATEGORIE = 'C'
387 inserer_elt tbl_2:liste
388
389 * Ligne categorie Couleur sieges
390 cho_1 = 'Couleur des sièges'
391 chs_val_opt = 'Tissu noir'
392 rang = &rang_elt(tbl_2:liste)
393 * num_ligne : numero de la ligne inseree (doit commencer à 0)
394 row_index = &num_alpha(rang)
395 CATEGORIE = 'S'
396 inserer_elt tbl_2:liste
397 {{/code}}
398
399
400 (((
401 ==
402 Articles connexes ==
403 )))
404
405 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.
406
407 {{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}}
408