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

Question

如何使用封装在 h:selectOneRadio 中的 rich:dataTable 获得如下布局

row1   col1   col2   col3

row2   radio1 radio1 radio1

row3   radio2 radio2 radio2

Answer 1

我认为可以通过三种方式做到这一点:

使用 Tomahawk <t:selectOneRadio> 和 <t:radio> 组件，如 Bozho 所述。这是最简单的解决方案。唯一的缺点是你必须在你的项目中集成另一个组件库( Tomahawk )。但是，该库与其他库兼容，例如 Richfaces 或 Icefaces 。

为此创建您自己的组件。这比之前的解决方案更复杂，并且可能不是很有趣，因为 Tomahawk 库已经提供了这个组件......

使用“基本” <h:selectOneRadio/> 组件，然后使用 Javascript 代码将 radio 元素移动到您想要的位置。在我的项目中，我有一个包含复选框列表的弹出窗口，但我想在两列中显示所有这些。不幸的是，<h:selectManyCheckbox> 组件仅提供 pageDirection 和 lineDirection 布局。所以我决定使用 pageDirection 布局来显示它们，然后使用 Javascript 操作生成的 HTML 代码将列表分成两部分。

所以这是我对 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();
        }
    }
}

(有关此代码的更多解释 here )

在您的情况下，Javascript 函数将更难编写，因为您想在 <rich:datatable> 生成的表中移动单选按钮。