p: datatable не обновляет строки должным образом - PullRequest
Новая
       13

p: datatable не обновляет строки должным образом

0 голосов
/ 27 сентября 2018

У меня есть p: datatable и p: inputSwitch в одном столбце, который указывает «выбранную» строку.Я запускаю событие p: ajax на p: inputwitch, и другие строки становятся невыбранными слушателем, и текущая строка становится выбранной.В этом событии я обновляю datatable, все записи в компоненте поддержки имеют правильные значения, переключатель включен, но он все еще красный. 

<h:panelGroup layout="block" styleClass="ui-g-12 refinance" id="cotPanel">

    <p:dataTable id="cot" value="#{cot.cods}" var="offer" reflow="true">
            <p:column width="18%" headerText="OFFER">
                    <p:outputLabel value="#{offer.name}" />
            </p:column>
            <p:column headerText="AAA" width="18%" styleClass="num">
                    <p:outputLabel value="#{of:formatNumberDefaultForLocale(offer.aaa, 'nl_NL')}" />
            </p:column>
            <p:column headerText="BBB" width="18%">
                    <p:outputLabel value="#{offer.bbb}" />
            </p:column>
            <p:column headerText="CCC" width="18%" styleClass="num">
                    <p:outputLabel value="#{of:formatNumberDefaultForLocale(offer.ccc, 'nl_NL')}" />
            </p:column>
            <p:column headerText="DDD" width="18%" styleClass="num">
                    <p:outputLabel value="#{offer.ddd}" />
                        </p:column>
            <p:column headerText="Select" width="10%">
                    <h:panelGroup styleClass="Width100 Flex">
                            <p:inputSwitch value="#{offer.selected}">
                                    <p:ajax event="change" listener="#{cot.onSelectCod(offer)}" process="@this"
                                        update="mainForm:cotPanel" />
                            </p:inputSwitch>
                    </h:panelGroup>
            </p:column>
            <p:column headerText="SELECTED" width="10%">
                    <p:outputLabel value="#{offer.selected}"/>
            </p:column>
    </p:dataTable>
</h:panelGroup>

и в слушателе компонента поддержки: 

public void onSelectCod(Cod entry) {
    if (entry.isSelected()) {
        for (Cod codTemp : cods) {
            if (!entry.equals(codTemp)) {
                codTemp.setSelected(false);
            }
        }
    }else {
        // i dont let it become unselected if click on selected row, it becomes unselected only if it is clicked on another entry
        entry.setSelected(true);
    }
}

Последний столбец в datatable показывает, что все значения правильные, входной переключатель находится справа, но он красный.Я также попытался написать styleClass, который будет «зеленым», если выбрано «истина», и «красным» в противном случае, и я вижу в DOM, что все остальные строки получают правильный класс, но не выбранная строка.

enter image description here

1 Ответ

0 голосов
/ 27 сентября 2018

Проблема заключается в том, что вы изменяете много значений в своем методе слушателя.Когда вы обновляете таблицу, другие переключатели изменяются, и это вызывает остальных слушателей.

Вместо этого вы можете использовать событие нажатия вместо изменения: 

<p:inputSwitch value="#{offer.selected}" styleClass="#{offer.selected ? 'green' : 'red'}">
        <p:ajax event="click" process="@this" listener="#{cot.onSelectCod(offer)" 
            update="mainForm:cotPanel" />
</p:inputSwitch>

Таким образом, выубедитесь, что метод слушателя вызывается только для коммутатора, с которым взаимодействует пользователь.

Также вам нужно будет немного переписать ваш метод слушателя, потому что теперь он должен вызываться только с интересующим вас объектом: 

public void onSelectCod(Cod entry) {
    // The entry here is now selected (you set it in the inputSwitch value)
    // So just mark the rest of the entries as unselected
    for (Cod codTemp : cods) {
        if (!entry.equals(codTemp)) {
            codTemp.setSelected(false);
        }
    }
}
...