PrimeFaces SelectOneRadio自定义布局分为两列

Question

我正在使用PrimeFaces的SelectOneRadio组件的自定义布局。

<h:outputLabel style="font-size: 22px" for="SignMethodRadio" value="Select your Signmethod : "/>
<p:selectOneRadio id="signMethodRadio" value="#{selectSignMethodView.signMethod}" layout="custom">
   <f:selectItems value="#{selectSignMethodView.signMethodList}" var="sm" itemLabel="#{sm}" itemValue="#{sm}"/>
   <f:ajax listener="#{selectSignMethodView.changeServers}" event="change" execute="@form" render="server"/>
</p:selectOneRadio>

<ui:repeat value="#{selectSignMethodView.signMethodList}" var="signMethod" varStatus="loop">
    <p:panel>
        <p:radioButton for=":signMethodForm:signMethodRadio" itemIndex="#{loop.index}"/>
        <h:outputText style="font-weight: bold" value=" #{signMethod} : "/>
        <h:outputText value="File Types allowed are : #{signMethod.fileTypes}"/>
    </p:panel>
</ui:repeat>

我的自定义布局包含单选按钮，后跟两个输出文本组件。我的问题是它们都出现在单列中。我希望这个自定义布局显示在两列中，即我的自定义无线电组件出现在两列中。我目前的情况如下：

我希望它像这样。

如何实现这一目标？

Answer 1

您可以将primefaces dataGrid与h：panelGroup结合使用而不是ui：repeat

<p:dataGrid value="#{selectSignMethodView.signMethodList}" var="signMethod" columns="2" rowIndexVar="index">
  <h:panelGroup>
      <p:radioButton for=":signMethodForm:signMethodRadio" itemIndex="#{index}"/>
      <h:outputText style="font-weight: bold" value=" #{signMethod} : "/>
      <h:outputText value="File Types allowed are : #{signMethod.fileTypes}"/>
   </h:panelGroup>
</p:dataGrid>

Answer 2

尝试如下：

<style>
    .selection tr {
       float: left;
        width: 50%;
    }
</style>

<h:panelGroup layout="block" styleClass="selection">
    <p:selectOneRadio layout="pageDirection"> 
        <!--Here is example data-->
        <f:selectItem itemLabel="A"/>
        <f:selectItem itemLabel="B"/>
        <f:selectItem itemLabel="C"/>
        <f:selectItem itemLabel="D"/>
        <f:selectItem itemLabel="E"/>
        <f:selectItem itemLabel="F"/>
    </p:selectOneRadio>
</h:panelGroup>

widht:50%表示两列的100/2计算。三列将为width:33%。

在Primefaces 5.0中，有一个grid布局，其中包含列。

<p:selectOneRadio layout="grid" columns="2">
        <f:selectItem itemLabel="A"/>
        <f:selectItem itemLabel="B"/>
        <f:selectItem itemLabel="C"/>
        <f:selectItem itemLabel="D"/>
        <f:selectItem itemLabel="E"/>
        <f:selectItem itemLabel="F"/>
</p:selectOneRadio>