Как использовать h: selectOneRadio в h: dataTable для выбора одной строки?

В соответствии с выпуском спецификации 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"> для создания одного столбца выбора. На выбранное значение ссылается атрибут selection элемента <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>

с участием

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

я нашел другое решение, и я хочу поделиться им с вами, это использовать h:selectBooleanCheckbox вместе с функцией единственного выбора JS, предложенной BalusC:

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

это установит только один флажок и обновит логическое свойство в отмеченном/непроверенном объекте.

переменная selectedRadioButton должна быть объявлена ​​вне функции.

var selectedRadioButton;

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

   selectedRadioButton = radioButton;
   selectedRadioButton.checked = true;
}

и в хтмл

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