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但没有阻止任何内容。

我已经看到了这个问题How update just specific cell in primefaces dataTable，其中答案说不可能指定单个单元格，但它是从2012年开始的，并且答案提到它可能会在以后的版本中修复。

Answer 1

玩了一会后，我找到了解决方案。

您可以定义围绕单元格内容的<p:outputpanel id="cell"></p:outputpanel>，然后在blockUI组件中使用block="cell"阻止它。

结果如下：

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

如何使用blockUI阻塞primeface中的单个数据表单元格

1 个答案: