Question

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

<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

正如我从source code看到page不支持dataList事件，另一方面dataGrid supports it。

解决方案是猴子修补，因为我们无法控制重写原始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（社区发布）开始，<p:dataList>

支持page事件

以下图片来自PrimeFaces user guide 5.3（第146页）。

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

问题中提到的page事件在PrimeFaces 5.3 final（社区发布）中完美无缺。

在PrimeFaces中使用p：dataList的页面事件

2 个答案: