将页面事件与PrimeFaces中的p：dataList一起使用

Question

<p:dataList>是否支持page事件？ 我试图以以下方式使用page事件（在浏览页面时使用<pe:blockUI>阻止<p:dataList> ）。

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

这不再起作用。 页面只是空白，没有错误。 <p:dataList>似乎不支持事件。

无论如何，可以在<p:dataList>模拟这种情况吗？

Answer 1

从源代码中可以看出， dataList不支持page事件，而dataGrid 支持它 。

解决方案将是猴子修补，因为我们无法控制重写原始JS文件，您可以在处理分页之前和之后挂接事件，所有这些都可以通过javascript进行。

这是一个示例：假设您的dataList widgetVar是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');
   }
 }

Answer 2

从PrimeFaces 5.3 final（社区版本）开始， page事件在<p:dataList>受支持。

下图取自PrimeFaces用户指南5.3 （第146页）。

在先前的指南中没有提及Ajax行为事件。

问题中提到的page事件在PrimeFaces 5.3 final（社区发行版）中可以完美地工作。

• https://github.com/primefaces/primefaces/issues/687
• https://github.com/primefaces/primefaces/commit/52b6c22eb37eca62a979d204f2030c82b795d472#diff-b651ae3f3b6abb0cf6945a9c589fa68aR98