简体   繁体   中英

How to add a radiobutton on each row in a dataTable

I want a radio button on each row in the list. This radiobutton will be used to indicate which answer that is correct. However, how do I manage to get that when it is inside a datatable? I tried adding a <h:form> and a <h:selectOneRadio> around the table, and then a <f:selectItem .../> in each column, but it does not work.

        <h:dataTable id="answerTable"
            value="#{questionHandler.answers}" var="answer">
            <h:column>
                <p>
                    <o:inputText id="sd" value="#{answer.description}"
                        styleClass="text" size="100" />
                </p>
            </h:column>

            <h:column>
            <!-- I want a radiobutton in each row-->
            </h:column>
        </h:dataTable>

This is not possible with the standard JSF components without bringing in a custom JavaScript function to uncheck all other radio buttons on the same column whenever a radio button is clicked. They are namely not grouped by the same input field name (which is a HTML-based prerequirement to uncheck all other buttons whenever one of the group is been checked). JSF inserts the table row index in the field name, see also the generated HTML output in your webbrowser.

However, you seem to be using OpenFaces , so you should be able to achieve the functional requirement with its <o:dataTable> component in combination with <o:singleRowSelection> . Read the OpenFaces developer documentation on DataTable Row Selection for details. Here's an extract of relevance from its developer documentation:

<o:dataTable var="product"
             value="#{ProductsList.products}" >
  <o:singleRowSelection
          rowData="#{ProductList.selectedProduct}"
          action="#{ProductList.processProductSelection}"/>
  <o:column>
    <f:facet name="header">
      <h:outputText value="name"/>
    </f:facet>
    <h:outputText value="#{product.name}" />
  </o:column>
</o:dataTable>

Almost all other JSF component libraries also offer similar functionality, eg PrimeFaces and RichFaces . That is what I would have recommended if I didn't discover that you were already using a component library which supports this out the box.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM