Question

我想创建一个网页，其中包含使用如下所示的数据组件的主要面板中的单选按钮。

我找到了一个实现自定义组件的解决方案，如http://www.javaworld.com/article/2077687/enterprise-java/group-radio-buttons-inside-a-jsf-datatable-component.html中提到的JSF。

但这是时间和很多代码。

Answer 1

Primefaces为selectOneRadio提供自定义布局。我使用selectOneRadio的自定义布局示例实现了表，如下所示。在第一列中，宽度为零，其中包含单选按钮。

<p:dataTable id ="employeeTable" rowIndexVar="rowId" var ="emp" value ="#{employeeList.employeeData}" widgetvar ="employeeTable" resizableColumns="true">

   <p:column headerText="" style="width:0px;">
     <p:selectOneRadio id="action" value="#{emp.status}" layout ="custom">
        <f:selectItem itemLabel="Yes" itemValue="Yes" />
        <f:selectItem itemLabel="No" itemValue="No" />
        <f:selectItem itemLabel="Amendment" itemValue="Amendment" />
        <f:selectItem itemLabel="KIV" itemValue="KIV" />
    </p:selectOneRadio>
    </p:column>

    <p:column headerText="Personnel No">
            <h:outputText value="#{emp.perNum}" />
    </p:column>
    <p:column headerText="Empl Name">
        <h:outputText value="#{emp.name}" />
    </p:column>                             
    <p:column headerText="Yes">
        <p:radioButton  for="action" itemIndex="0" />
    </p:column>
    <p:column headerText="No">
        <p:radioButton  for="action" itemIndex="1" />
    </p:column>
    <p:column headerText="Amendment">
        <p:radioButton for="action" itemIndex="2" />
    </p:column> 
    <p:column headerText="KIV">
        <p:radioButton  for="action" itemIndex="3" />
    </p:column> 
</datatable>

Answer 2

在dataTable的外部使用p:selectOneRadio，并将layout属性设置为“ custom”。用f:selectItems填充此单选与通过“值”参数提供给dataTable的数据相同。

<p:selectOneRadio id="customRadio" 
                  value="#{beanMB.selectedItem}"
                  layout="custom">
    <f:selectItems value="#{beanMB.tableItems}"
                   var="item"
                   itemValue="#{item.radioValue}"
                   itemLabel="#{item.radioLabel}"/>
</p:selectOneRadio>

在dataTable列中，使用p:radioButton与itemIndex匹配当前rowIndex。

<p:dataTable var="item"
             rowIndexVar="rowIndex"
             value="#{beanMB.tableItems}">

    <p:column headerText="Choice">
        <p:radioButton for="@form:customRadio" 
                       itemIndex="#{rowIndex}"
                       rendered="#{item.radioRendered}"/>
    </p:column>
</p:dataTable>

数据集内的组单选按钮 - Primefaces

2 个答案: