Question

如何使用h:selectOneRadio

中封装的rich:dataTable获取如下布局

row1   col1   col2   col3

row2   radio1 radio1 radio1

row3   radio2 radio2 radio2

Answer 1

你可以使用战斧<t:selectOneRadio>和layout="spread"，并在每个<t:radio>

中放置一个<rich:column>

Answer 2

我认为有三种方法可以做到：

使用Tomahawk <t:selectOneRadio>和<t:radio>组件，如Bozho所述。这是最简单的解决方案。唯一的缺点是您必须在项目中集成另一个组件库（Tomahawk）。但是，此库与其他库兼容，例如Richfaces或Icefaces。
为此创建自己的组件。这比以前的解决方案更复杂，并且可能不是很有趣，因为Tomahawk库已经提供了这个组件......
使用“基本”<h:selectOneRadio/>组件，然后使用Javascript代码将无线电元素移动到所需位置。在我的项目中，我有一个弹出窗口，其中包含一个复选框列表，但我想在两列中显示所有这些复选框。不幸的是，<h:selectManyCheckbox>组件仅提供pageDirection和lineDirection布局。所以我决定使用pageDirection布局显示它们，然后操纵生成的HTML代码，使用Javascript将列表分成两部分。

所以这就是我在JSF代码上所做的：

<h:selectManyCheckbox id="rolesSelection" value="#{myRolesBean.selectedRoles}" layout="pageDirection">
    <f:selectItems value="#{myRolesBean.RolesList}"/>
</h:selectManyCheckbox>

<script type="text/javascript">
    splitElementsIntoTwoColumns("myForm\\:rolesSelection");
</script>

和Javascript函数（使用jQuery捆绑在Richfaces库中的function splitElementsIntoTwoColumns(tableId) { var idx = 1; var row, next; while ((row = jQuery('#' + tableId + ' tr:nth-child(' + idx++ + ')')).length) { if ((next = jQuery('#' + tableId + ' tr:nth-child(' + idx + ')')).length) { row.append(next.find('td')); next.remove(); } } }）：

<rich:datatable>

（关于此代码的更多解释here）

在您的情况下，Javascript函数将更难写，因为您想要移动由{{1}}生成的表格中的单选按钮。

如何使用jsf为表中的每一行获取单选按钮组功能

2 个答案: