JSF2 SelectOneRadio e DataTable

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.

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.