如何在h:dataTable中使用h:selectOneRadio来选择单行

Question

>我在表格中显示了页面列表。每个页面都有属性主页并且我希望在数据表中有一列要绑定到此属性上的单选按钮，并且用户只能检查一个值。如何在服务器端获取此值？

我看到了下面这样的例子：http://jforum.icesoft.org/JForum/posts/list/14157.page，但我想知道在这种情况下的最佳实践是什么。

Answer 1

根据 JSF 规范问题 329，我终于在 JSF 2.3 中实现了它。使用新的 group 属性，您现在可以对转发器组件中的单选按钮进行分组。

<h:dataTable value="#{bean.items}" var="item">
    <h:column>
        <h:selectOneRadio group="foo" value="#{bean.selectedItem}">
            <f:selectItem itemValue="#{item}" />
        </h:selectOneRadio>
    </h:column>
</h:dataTable>

它将按照Mojarra 2.3.0-m07提供。

---

在 JSF 2.3 之前，这对于标准 JSF <h:selectOneRadio>来说并非易事。基本上，每行中的单选按钮需要使用相同的输入name相互分组，以便在您选择一个单选按钮时取消选中其他单选按钮。但是它们没有分组，它们都有自己的name，因此其他单选按钮永远不会被取消选中。

像PrimeFaces这样的组件库通过提供特殊的属性或列组件解决了这个问题。另请参阅此展示示例，该示例使用<p:column selectionMode="single">生成单个选择列。所选值由 <p:dataTable> 的 selection 属性引用。如果您已经在使用组件库，并且它已经为您提供了这样的组件，则应使用它。

在带有<h:selectOneRadio>的标准 JSF <h:dataTable>中，您需要引入一个 JavaScript 解决方法，如下所示，该解决方法取消选中同一列中的所有其他单选按钮：

<h:dataTable value="#{bean.items}" var="item">
    <h:column>
        <h:selectOneRadio valueChangeListener="#{bean.setSelectedItem}"
            onclick="dataTableSelectOneRadio(this);">
            <f:selectItem itemValue="null" />
        </h:selectOneRadio>
    </h:column>
    ...
</h:dataTable>

跟

public void setSelectedItem(ValueChangeEvent event) {
    FacesContext context = FacesContext.getCurrentInstance();
    selectedItem = context.getApplication().evaluateExpressionGet(context, "#{item}", Item.class);
}

和

function dataTableSelectOneRadio(radio) {
    var radioId = radio.name.substring(radio.name.lastIndexOf(':'));
    for (var i = 0; i < radio.form.elements.length; i++) {
        var element = radio.form.elements[i];
        if (element.name.substring(element.name.lastIndexOf(':')) == radioId) {
            element.checked = false;
        }
    }
    radio.checked = true;
}

Answer 2

我找到了另一种解决方案，我想与您分享，就是使用 h:selectBooleanCheckbox ，以及 BalusC 建议的单选 JS 函数：

            <ace:column id="homePage" headerText="Home Page">
                <h:selectBooleanCheckbox value="#{adpage.homePage}" onclick="dataTableSelectOneRadio(this);"></h:selectBooleanCheckbox>
            </ace:column>

和JS：

function dataTableSelectOneRadio(radio) {
var radioId = radio.name.substring(radio.name.lastIndexOf(':'));
for (var i = 0; i < radio.form.elements.length; i++) {
    var element = radio.form.elements[i];
    if (element.name.substring(element.name.lastIndexOf(':')) == radioId) {
        element.checked = false;
               }
         }
      radio.checked = true;
    }

这将只选中一个复选框，并更新选中/未选中的对象中的布尔属性。

Answer 3

selectedRadioButton 变量应该在函数之外声明。

var selectedRadioButton;
function uncheckRadioButtons(radioButton) {
   if (selectedRadioButton != null) {
      selectedRadioButton.checked = false;
   }
   selectedRadioButton = radioButton;
   selectedRadioButton.checked = true;
}

和在 xhtml 中

 <h:selectOneRadio 
        onclick="uncheckRadioButtons(this);">
        <f:selectItem itemValue="null" />
    </h:selectOneRadio>