Spesso capita di dover utilizzare in una colonna di una DataTable i radiobutton. Ovviamente non appartenendo allo stesso container (essendo contenuti uno in ogni cella diversa), non sono raggruppabili, e, in html, agiscono come entità separate e svincolate.
Utilizzando le Java Server Faces, ci vengono in aiuto i valueChangeListeners.
Innanzitutto, mettiamo il selectoneradio nella datatable, impostando come listener un metodo sul nostro backingBean.
1 2 3 4 5 6 7 8 | <h:dataTable value="#{bean.elementi}" var="elemento"> <h:column> <f:facet name="header">Seleziona:</f:facet> <h:selectOneRadio id="radioSeleziona" value="#{bean.selezione}" valueChangeListener="#{bean.doSeleziona}" onclick="dataTableSelectRadio(this);"> <f:selectItem itemValue="#{elemento.id}"></f:selectItem> </h:selectOneRadio> </h:column> </h:dataTable> |
Non essendo un radioButton multiplo (non è un insieme), per deselezionare gli altri radioButton quando si clicca su quello scelto,utilizziamo una funzione javascript agganciata nell’evento onclick.
1 2 3 4 5 6 7 8 9 10 11 12 | <h:outputScript library="js"> function dataTableSelectRadio(radio) { var id = radio.name.substring(radio.name.lastIndexOf(':')); var element = radio.form.elements; for (var i = 0; i < element.length; i++) { if (element[i].name.substring(element[i].name.lastIndexOf(':')) == id) { element[i].checked = false; } } radio.checked = true; } </h:outputScript> |
Sul nostro backingBean poi , andiamo ad implementare il ValueChangeListener:
1 2 3 4 | public void doSeleziona(ValueChangeEvent event){ elementoSelezionato= (String)event.getNewValue(); internalDoQualcosa(); } |
Ovviamente potete sostituire lo script javascript con qualcosa di piu semplice utilizzando JQuery, ma la sostanza rimane questa.
