將頁面事件與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