如何自定义布局 h:selectOneRadio

Posted 2023-02-22

【中文标题】如何自定义布局 h:selectOneRadio

【英文标题】：How to custom layout h:selectOneRadio

【发布时间】：2012-06-30 14:45:04

【问题描述】：

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

【问题讨论】：

***.com/questions/1150717/…的可能重复

【参考方案1】：

不完全是这样，但您可以使用 Tomahawk's <t:selectOneRadio> 并将 layout 属性设置为 "spread" 来实现单选按钮的无标记呈现。然后，您可以使用<t:radio> 将各个单选按钮以您想要的方式放置在标记中，例如<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>） em>

【讨论】：

非常感谢 :) Tomhawk 目前可以工作，但是当我通过 mvn 下载 Tomhawk 时，它下载了很多额外的 jar 文件，这对我来说似乎有点矫枉过正。我看到你有一个关于通过扩展 MenuRenderer 来设置 selectOneMenu 样式的教程，我会看看它，也许它会帮助我创建一个自定义的 selectOneRadio 组件。非常感谢

Tomahawk 是开源的，你也可以看看它。是的，它带有一大堆依赖项。仅t:selectOneRadio，这些 Apache Commons 依赖就足够了，其他的都不需要。

是的，它确实有很多依赖项。我们通过 maven 向我们的应用程序添加依赖项，我这样做 <groupId>org.apache.myfaces.tomahawk</groupId> <artifactId>tomahawk20</artifactId> <version>1.1.13</version>，它带有很多，有没有办法避免这种情况，BalusC？

谢谢你，你的帮助很大，我会把这个暴露给 maven 社区。​​span>