如何使用h：selectOneRadio在h：dataTable中选择单行？ [英] How to use h:selectOneRadio in h:dataTable to select single row?

问题描述

我有表中显示的页面列表。每个页面都有属性HomePage
，我希望在datatable中有一列单选按钮绑定在此属性上，用户只能检查一个值。我如何在服务器端获得这个值？

我看到一些例子，如下所示：
http://jforum.icesoft.org/JForum/posts/list/14157.page ，
但我想要知道在这种情况下最好的做法是什么。

解决方案

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

 < h：dataTable value =＃{bean.items}var =item> 
< h：column> 
< h：selectOneRadio group =foovalue =＃{bean.selectedItem}> 
< f：selectItem itemValue =＃{item}/> 
< / h：selectOneRadio> 
< / h：column> 
< / h：dataTable> 
  

根据Mojarra 2.3.0-m07可以使用。

---

在JSF 2.3之前，这不符合标准JSF < h：selectOneRadio> 。基本上，每行中的单选按钮需要使用相同的输入名称进行分组，以便每当您选择一个时，其他单选按钮将被取消选中。但是他们没有被分组，他们都有自己的名称，所以其他单选按钮永远不会被取消选中。

组件库，如PrimeFaces已经通过提供一个特殊的属性或列组件来解决它。另请参阅这个展示示例，它使用 p：column selectionMode =single> 以生成单个选择列。所选值由选择属性< p：dataTable> 引用。如果您已经在使用组件库，并且已经使用了组件库，那么应该使用它。

在标准JSF中 h：dataTable> 与< h：selectOneRadio> 您需要引入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> 
  

与

 FacesContext context = FacesContext.getCurrentInstance（）; 
 selectedItem = context.getApplication（）。evaluateExpressionGet（context，＃{item}，Item.class）; 
} 
  

和

  function dataTableSelectOneRadio（radio）{
 var radioId = radio.name.substring（radio.name.lastIndexOf（'：'））; （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; 
} 
  

I have list of pages displayed in table. Each page has property homePage and I want in the datatable to have a column of radio buttons to be binded on this property, and the user can only check one value. How can I get this value on server side?

I saw some examples like the following: http://jforum.icesoft.org/JForum/posts/list/14157.page, but I would like to know what is the best practice in such case.

解决方案

As per JSF spec issue 329 I have finally implemented it for JSF 2.3. With the new group attribute you will now be able to group radio buttons in a repeater component.

<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>

It will be available as per Mojarra 2.3.0-m07.

---

Before JSF 2.3, this is not trivial with standard JSF <h:selectOneRadio>. Basically, the radio button in every row needs to be grouped with each other using the same input name so that the other radio buttons get unchecked whenever you select one. But they are not been grouped, they have all their own name, so the other radio buttons would never be unchecked.

Component libraries like PrimeFaces have solved it by providing a special attribute or column component. See also this showcase example which uses a <p:column selectionMode="single"> to generate a single selection column. The selected value is referenced by selection attribute of <p:dataTable>. If you're already using a component library and it has already such a component for you, you should use it.

In standard JSF <h:dataTable> with <h:selectOneRadio> you'd need to bring in a JavaScript workaround as follows which unchecks all other radio buttons in the same column:

<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>

with

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

and

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

这篇关于如何使用h：selectOneRadio在h：dataTable中选择单行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！