如何选择h：selectOneRadio的h：dataTable在回发时保持选择？ [英] How to make selected h:selectOneRadio of h:dataTable remain selected on postback?

问题描述

在正常情况下，如下所示：

In normal circumstances like this:

  <h:form>           
    <h:selectOneRadio value="#{bean.gender}">
        <f:selectItem itemValue="Male" itemLabel="Male" />
        <f:selectItem itemValue="Female" itemLabel="Female" />
        <f:selectItem itemValue="Other" itemLabel="Other" />
    </h:selectOneRadio>
    <h:commandButton value="Submit" action="#{bean.action}" />
  </h:form>

选择一个单选按钮取消其他&单选按钮将在回发后保持选中状态。 （当渲染相同的视图时）

Selecting one radio button disselects the other & the radio button will be remain selected on the postback. (when the same view is rendered)

但是，当我们处理像< h：dataTable> ，选择将丢失。

However, when we're dealing with an iterating component like <h:dataTable>, the selection is lost.

考虑片段：

        <h:form id="hashMapFormId">           
            <b>HASH MAP:</b>
            <h:dataTable value="#{playersBean.dataHashMap.entrySet()}" var="t" border="1">
                <h:column>
                    <f:facet name="header">Select</f:facet>
                    <h:selectOneRadio id="radiosId" onclick="deselectRadios(this.id);" 
                                        value="#{playersBean.select}">
                        <f:selectItem itemValue="null"/>
                    </h:selectOneRadio>
                </h:column> 
            </h:dataTable>
            <h:commandButton value="Show Hash Map Selection" 
                             action="#{playersBean.showSelectedPlayer()}" />
        </h:form>

当选择一个单选按钮时，通过简单的JavaScript实现，选择其他单选按钮 -

With disselecting the other radio buttons when one radio button is selected being implemented by simple JavaScript-

            function deselectRadios(id) {

                var f = document.getElementById("hashMapFormId");
                for (var i = 0; i < f.length; i++)
                {
                    var e = f.elements[i];
                    var eid = e.id;
                    if (eid.indexOf("radiosId") !== -1) {
                        if (eid.indexOf(id) === -1) {
                            e.checked = false;
                        } else {
                            e.checked = true;
                        }
                    }
                }
            }

GET请求：

Fire the GET request:

选择单选按钮：

Select a radio button:

现在按提交按钮，回复：

Now press the submit button, response:

您可以看到单选按钮在回发后被取消选择。如何解决这个缺点？

You see that the radio button gets dis selected on postback. How to solve this shortcoming?

我很清楚，这是因为这个组件属性 itemValue code> null ：

I know it very well that this is due to this component attribute itemValue being null:

<f:selectItem itemValue="null"/>

推荐答案

这个技巧是从JSF 1.x /在< h：dataTable> 中不能使用< h：selectOneRadio> / code>。这个招数起源于我10年前的博客文章使用数据表 - 选择一行无线电按钮。

This trick is a leftover from JSF 1.x / 2.0/2.1 when it wasn't possible to use a <h:selectOneRadio> for single row selection in a <h:dataTable>. This trick originated in my 10 year old blog article Using Datatables - Select row by radio button.

根本的问题是，HTML单选按钮基于他们的名称属性分组，所以webbrowser知道哪一个人选择何时取消选择。但是，JSF通过设计为每个< h：dataTable> 项目设计了一个不同的行，其中行索引是内联的，因此它们不能被分组，因此基于JavaScript的解决方法。

The root problem is, HTML radio buttons are grouped based on their name attribute, so the webbrowser knows which others to unselect when one is selected. But JSF generates by design a different one for each <h:dataTable> item, with the row index inlined and therefore they can't be grouped and hence the JavaScript based workaround.

自从JSF 2.2以来，新的 passthrough元素和属性功能，但是可以强制名称属性到您选择的值，并通过一个帮助者< h：inputHidden> 。在上一年的另一篇博客文章中，这是丰富的：使用h的自定义布局：JSF 2.2中的selectOneRadio 。本文使用< ui：repeat> 作为示例，可以将其重写为< h：dataTable> 如下。

Since JSF 2.2, with the new passthrough elements and attributes feature, it's however possible to force the name attribute to the value of your choice and capture the selected item via a helper <h:inputHidden>. This is fleshed out in another blog article of me, from previous year: Custom layout with h:selectOneRadio in JSF 2.2. The article uses <ui:repeat> as an example, this can be rewritten to <h:dataTable> as below.

<h:form>
    <h:dataTable value="#{bean.items}" var="item">
        <h:column>
            <input type="radio" jsf:id="item" a:name="#{hiddenItem.clientId}"
                value="#{item.id}" a:checked="#{item.id eq bean.selectedItemId ? 'checked' : null}" />
        </h:column>
        <h:column>#{item.id}</h:column>
        <h:column>#{item.name}</h:column>
    </h:dataTable>
    <h:inputHidden id="selectedItem" binding="#{hiddenItem}" value="#{bean.selectedItemId}"
        rendered="#{facesContext.currentPhaseId.ordinal ne 6}" />
    <h:commandButton id="submit" value="Submit" action="#{bean.submit}" />
</h:form>

@Named
@ViewScoped
public class Bean implements Serializable {

    private List<Item> items;
    private Long selectedItemId;

    // ...

    public void submit() {
        System.out.println("Selected item ID: " + selectedItemId);
    }

    // ...
}

是的，所选的单选按钮仍然以这种方式在回发上保持选择。您也可以传递整个实体，这只需要在< h：inputHidden> 上的转换器。

And yes, the selected radio button remains selected on postback this way. You can also pass whole entities, this only requires a converter on the <h:inputHidden>.

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