在 PrimeFaces 中使用带有 p:dataList 的页面事件 [英] Using the page event with p:dataList in PrimeFaces

问题描述

是否 支持 page 事件吗?我正在尝试按以下方式使用 page 事件(使用 阻止 在浏览页面时).

Does a <p:dataList> support the page event? I'm trying to use the page event in the following way (blocking a <p:dataList> using <pe:blockUI> while going through pages).

<pe:blockUI target="dataList" widgetVar="blockDataListUIWidget">
    <h:panelGrid columns="2">
        <h:graphicImage library="default" name="images/ajax-loader1.gif"/>
        <h:outputText value="Fetching..." class="block-ui-text"/>
    </h:panelGrid>
</pe:blockUI>

<p:dataList id="dataList"
            var="orderRow"
            value="#{orderDetailsManagedBean}"
            first="0"
            rows="1"
            paginator="true"
            paginatorAlwaysVisible="false"
            type="definition" lazy="true"
            emptyMessage="Message">

    <p:ajax event="page"
            onstart="PF('blockDataListUIWidget').block()" 
            oncomplete="PF('blockDataListUIWidget').unblock()"
            process="@this"
            update="@none"/>

            ...

</p:dataList>

这不再起作用了.该页面只是保持空白，没有错误. 似乎不支持事件.

This does not work anymore. The page just remains blank with no errors. Events don't seem to be supported by <p:dataList>.

无论如何可以在中模拟这个场景吗?

Can this scenario be simulated in <p:dataList> anyway?

推荐答案

正如我从 源代码 page 事件不被 dataList 支持，另一方面 dataGrid 支持.

As I have seen from the source code that page event is not supported by dataList, on the other hand dataGrid supports it.

解决方案是猴子补丁，因为我们无法控制重写原始 JS 文件，您可以在处理分页之前和之后挂钩一个事件，全部通过 javascript.

The solution would be monkey patching as we don't have control on rewriting the original JS file, you can hook an event before the handling of the pagination and after it, all by javascript.

这是一个例子:假设你的 dataList widgetVar 是 dataListWV

Here's an example: assuming your dataList widgetVar is dataListWV

//making sure the widgetVar is ready to be used    
setTimeout(dataListPaginationExtraEvents, 1000);    

function dataListPaginationExtraEvents() {
   var odlHandlePagination = PF('dataListWV').handlePagination;

   PF('dataListWV').handlePagination = function(newState) {
      //before
      console.log('start fetch');
      //calling original pagination 
      odlHandlePagination.apply(this, [newState]);
      //after
      console.log('end fetch');
   }
 }

这篇关于在 PrimeFaces 中使用带有 p:dataList 的页面事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！