Как заблокировать отдельную ячейку с данными в простых лицах с помощью blockUI

Question

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

Я хочу, чтобы ячейка блокировалась при нажатии кнопки на этой ячейке.

Пример кода:

<p:dataTable id="table" var="tableVar" value="#{tableValues}">
    <p:columns id="column" var="columnVar" value="#{columnValues}">
        <f:facet name="header">
            <h:outputText value ="#{columnVar}"/>
        </f:facet>
        <h:outputText value="Some Text"/>
        <p:commandButton value="Button Text"
                         id="button"
                         update="table"
                         actionListener="#{some.method()}"/>

        <p:blockUI block="?????" trigger="button">
            <p:graphicImage name="loading.gif"/>
        </p:blockUI>
    </p:columns>
</p:dataTable>

Я не знаю, что должно идти в параметре block, чтобы блокировать только ячейку. Я также пытался просто block="column", но даже это не блокировало столбец, как я ожидал, вместо этого он просто отображал gif загрузки рядом с кнопкой, но ничего не блокировал.

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

Answer 1

Немного поиграв, я нашел решение.

Вы можете определить <p:outputpanel id="cell"></p:outputpanel>, окружающий содержимое ячейки, а затем заблокировать его с помощью block="cell" в компоненте blockUI.

Результат будет примерно таким:

<p:dataTable id="table" var="tableVar" value="#{tableValues}">
    <p:columns id="column" var="columnVar" value="#{columnValues}">
        <f:facet name="header">
            <h:outputText value ="#{columnVar}"/>
        </f:facet>
        <p:outputpanel id="cell">
            <h:outputText value="Some Text"/>
            <p:commandButton value="Button Text"
                             id="button"
                             update="table"
                             actionListener="#{some.method()}"/>

            <p:blockUI block="cell" trigger="button">
                <p:graphicImage name="loading.gif"/>
            </p:blockUI>
        </p:outputpanel>
    </p:columns>
</p:dataTable>