Wiki source code of Simuler la mono-sélection dans une table liste avec une case à cocher
Last modified by Julien EYMERY on 2015/07/17 09:32
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | Lorsque l'on place une case à cocher avec la propriété "Sélection" cochée dans une table liste alors la sélection est obligatoirement en multi-sélection. | ||
| 2 | |||
| 3 | Par exemple : | ||
| 4 | |||
| 5 | |||
| 6 | {{code language="xml" language="xml"}} | ||
| 7 | <table cols="2" id="TBL_1" width="75%" border="1" cellpadding="1" cellspacing="1"> | ||
| 8 | <tbody><adelia:tablelist name="TBL_1"> | ||
| 9 | <tr> | ||
| 10 | <td><adelia:checkbox type="BOOL" selection="true"><input type="checkbox" name="_FLAGSEL" id="_FLAGSEL" /></adelia:checkbox></td> | ||
| 11 | <td><adelia:outputfield name="CHO_1" type="NB2" refc="false"/></td> | ||
| 12 | </tr> | ||
| 13 | </adelia:tablelist></tbody> | ||
| 14 | </table> | ||
| 15 | {{/code}} | ||
| 16 | |||
| 17 | |||
| 18 | Pour simuler la mono-sélection, il faut passer par une fonction Javascript : | ||
| 19 | |||
| 20 | |||
| 21 | {{code language="xml" language="xml"}} | ||
| 22 | <table cols="2" id="TBL_1" width="75%" border="1" cellpadding="1" cellspacing="1"> | ||
| 23 | <tbody><adelia:tablelist name="TBL_1"> | ||
| 24 | <tr> | ||
| 25 | <td><adelia:checkbox type="BOOL" selection="true"><input type="checkbox" name="_FLAGSEL" id="_FLAGSEL" onclick="return checkOnlyOne(this, 'TBL_1', 'ID_WPAGE1', 'TBL_1', true)"/></adelia:checkbox></td> | ||
| 26 | <td><adelia:outputfield name="CHO_1" type="NB2" refc="false"/></td> | ||
| 27 | </tr> | ||
| 28 | </adelia:tablelist></tbody> | ||
| 29 | </table> | ||
| 30 | {{/code}} | ||
| 31 | |||
| 32 | |||
| 33 | Voici la définition de la fonction checkOnlyOne : | ||
| 34 | |||
| 35 | |||
| 36 | |||
| 37 | {{code language="js" language="js"}} | ||
| 38 | <script> | ||
| 39 | //<![CDATA[ | ||
| 40 | // Fonction qui permet de ne cocher qu'une case à cocher à la fois. | ||
| 41 | // idTable : Valeur de l'attribut id du tag TABLE si la case à cocher est contenue dans une table. Passer null sinon. | ||
| 42 | // adeliaPageName : Nom de la page Adelia | ||
| 43 | // adeliaListName : Nom de la table liste (adelia:tablelist) ou liste (adelia:b_list) Adelia | ||
| 44 | // zeroOrOne : true si on veut aucune ou une case à cocher cochée; false sinon (à la manière d'une liste de bouton radio : si une case à cocher est cochée alors on ne peut pas retourner dans l'état aucune case à cocher cochée) | ||
| 45 | function checkOnlyOne(objCheckbox, idTable, adeliaPageName, adeliaListName, zeroOrOne) | ||
| 46 | { | ||
| 47 | var tabInput = idTable != null ? document.getElementById(idTable).getElementsByTagName('input') : document.getElementsByTagName('input'); | ||
| 48 | var i, lgTabInput = tabInput.length, objInput, objCheckboxChecked = null; | ||
| 49 | var checkboxPrefix = ':lst:' + adeliaPageName + ':' + adeliaListName + ':_FLAGSEL:'; | ||
| 50 | // Recherche d'une case a cocher cochée dans la table liste | ||
| 51 | for (i = 0; i < lgTabInput; i++) | ||
| 52 | { | ||
| 53 | objInput = tabInput[i]; | ||
| 54 | if (objInput != objCheckbox && objInput.getAttribute('type') == 'checkbox' && objInput.checked && objInput.name && objInput.name.indexOf(checkboxPrefix) == 0) | ||
| 55 | { | ||
| 56 | objCheckboxChecked = objInput; | ||
| 57 | break; | ||
| 58 | } | ||
| 59 | } | ||
| 60 | if (objCheckboxChecked) | ||
| 61 | { | ||
| 62 | if (objCheckbox.checked) | ||
| 63 | { | ||
| 64 | // l'utilisateur tente de cocher | ||
| 65 | // on decoche l'ancienne case a cocher | ||
| 66 | objCheckboxChecked.checked = false; | ||
| 67 | } | ||
| 68 | else | ||
| 69 | { | ||
| 70 | // l'utilisateur tente de decocher | ||
| 71 | if (! zeroOrOne) | ||
| 72 | // on interdit le decochage | ||
| 73 | return false; | ||
| 74 | } | ||
| 75 | } | ||
| 76 | else | ||
| 77 | { | ||
| 78 | // l'utilisateur tente de decocher | ||
| 79 | if (! objCheckbox.checked && ! zeroOrOne) | ||
| 80 | // on interdit le decochage | ||
| 81 | return false; | ||
| 82 | } | ||
| 83 | return true; | ||
| 84 | } | ||
| 85 | //]]> | ||
| 86 | </script> | ||
| 87 | {{/code}} | ||
| 88 | |||
| 89 | |||
| 90 | ((( | ||
| 91 | == (% style="line-height: 1.5;" %)Articles connexes(%%) == | ||
| 92 | ))) | ||
| 93 | |||
| 94 | 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. | ||
| 95 | |||
| 96 | {{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}} | ||
| 97 |