使用 p:blockUI 或 pe:blockUI 阻止像 p:dataTable 这样的迭代组件的子/封闭组件不起作用答案

【问题标题】：Blocking a child/enclosing component of iterating components like p:dataTable using p:blockUI or pe:blockUI does not work使用 p:blockUI 或 pe:blockUI 阻止像 p:dataTable 这样的迭代组件的子/封闭组件不起作用
【发布时间】：2026-01-31 20:10:01
【问题描述】：

我的目标是 <p:dataTable> 被 <pe:blockUI> 阻止，如下所示。

<pe:blockUI target="dataTable" widgetVar="blockUIWidget">
    <h:outputText value="Sending data..."/>
</pe:blockUI>

<p:dataTable id="dataTable" var="row" value="Test">
    <p:column>
        <p:commandLink id="link" value="Link" onstart="PF('blockUIWidget').block()" oncomplete="PF('blockUIWidget').unblock()"/>
    </p:column>
</p:dataTable>

当然，这个功能很好。

我不需要针对整个数据表，而只需针对表内的链接。以下尝试这样做是不成功的。

<pe:blockUI target="dataTable:link" widgetVar="blockUIWidget">
    <h:outputText value="Sending data..."/>
</pe:blockUI>

这里，target 属性的值已从dataTable 更改为dataTable:link 以使其引用链接（数据表保持静止）。

在这种情况下，它保持静音。浏览器控制台上不会出现错误，也不会出现任何异常。

<p:blockUI> 也会发生同样的事情。以下尝试运行良好。

<p:blockUI block="dataTable" widgetVar="blockUI"/>

<p:dataTable id="dataTable" var="row" value="Test">
    <p:column>
        <p:commandLink id="link" value="Link" onstart="PF('blockUI').show()" oncomplete="PF('blockUI').hide()"/>
    </p:column>
</p:dataTable>

将<p:blockUI> 指向表内的<p:commandLink>，如下所示，但不起作用。

<p:blockUI block="dataTable:link" widgetVar="blockUI"/>

再次没有错误，没有例外。

有什么意义？ <p:blockUI>或<pe:blockUI>不能定位迭代组件的封闭组件吗？

【问题讨论】：

标签： jsf primefaces jsf-2.2 primefaces-extensions

【解决方案1】：

当<p/pe:blockUI> 在数据表列中定义如下时，这很有效。

<p:dataTable id="dataTable" var="row" value="Test">
    <p:column>
        <!--Using PrimeFaces Extensions <pe:blockUI>-->
        <pe:blockUI target="link" widgetVar="blockUIWidget">
            <h:outputText value="Sending data..."/>
        </pe:blockUI>
        <p:commandLink id="link" value="Link" onstart="PF('blockUIWidget').block()" oncomplete="PF('blockUIWidget').unblock()"/>
    </p:column>

    <p:column>
        <!--Using PrimeFaces <p:blockUI>-->
        <p:blockUI block="link1" widgetVar="blockLink1UI" />
        <p:commandLink id="link1" value="Link1" onstart="PF('blockLink1UI').show()" oncomplete="PF('blockLink1UI').hide()"/>
    </p:column>

    <p:column>
        <!--Using PrimeFaces <p:blockUI>-->
        <p:blockUI block="link2" widgetVar="blockLink2UI" />
        <p:commandLink id="link2" value="Link2" onstart="PF('blockLink2UI').show()" oncomplete="PF('blockLink2UI').hide()"/>
    </p:column>
</p:dataTable>

【讨论】：