如何自定义布局h:selectOneRadio

Question

h:selectOneRadio的布局可以是水平的也可以是垂直的,所以有一种方法可以做一些自定义布局.例如,不是显示8个单选按钮,而是将它们显示为2行,每行4个？请在PrimeFaces p:selectOneRadio解决方案旁边提供答案,它使用CSS3导致IE8显示矩形形状的单选按钮.

Answer 1

这不完全是,但你可以使用战斧的 <t:selectOneRadio>与layout设置属性"spread"有一个单选按钮markupless渲染.然后,您可以使用<t:radio>将标记中的各个单选按钮放置在所需的位置,例如a <h:panelGrid columns="4">.

例如

<t:selectOneRadio id="foo" value="#{bean.selectedItem}" layout="spread">
    <f:selectItems value="#{bean.availableItems}" />
</t:selectOneRadio>

<h:panelGrid columns="4">
    <t:radio for="foo" index="0" />
    <t:radio for="foo" index="1" />
    <t:radio for="foo" index="2" />
    <t:radio for="foo" index="3" />

    <t:radio for="foo" index="4" />
    <t:radio for="foo" index="5" />
    <t:radio for="foo" index="6" />
    <t:radio for="foo" index="7" />
</h:panelGrid>

甚至当未指定单选按钮的数量时

<h:panelGrid columns="4">
    <c:forEach items="#{bean.availableItems}" varStatus="loop">
        <t:radio for="foo" index="#{loop.index}" />
    </c:forEach>
</h:panelGrid>

(注意,<ui:repeat>它不适合在视图渲染时运行,因此最终成为单列<h:panelGrid>,您需要使用纯HTML <table>)