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

时间:2012-06-10 13:46:27

标签: jsf jsf-2 datatable selectoneradio

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

我看到了一些如下例子: http://jforum.icesoft.org/JForum/posts/list/14157.page, 但我想知道在这种情况下最佳做法是什么。

3 个答案:

答案 0 :(得分:19)

根据JSF spec issue 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">生成单个选择列的this showcase example。所选值由selection的{​​{1}}属性引用。如果您已经在使用组件库并且它已经有了这样的组件,那么您应该使用它。

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

<h:selectOneRadio>

<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);
}

答案 1 :(得分:0)

我找到了另一个解决方案,我希望与您分享,是使用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;
    }

这将仅检查一个复选框并更新已检查/未检查对象中的布尔属性。

答案 2 :(得分:0)

我通过使用以下javascript

修复了数据表中单选按钮的选择
function uncheckRadioButtons(radioButton) {
var selectedRadioButton;
   if (selectedRadioButton != null) {
      selectedRadioButton.checked = false;
   }

   selectedRadioButton = radioButton;
   selectedRadioButton.checked = true;
}

和xhtml

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