将页面事件与PrimeFaces中的p:dataList一起使用 [英] Using the page event with p:dataList in PrimeFaces

问题描述

<p:dataList> 是否支持page事件?我正在尝试通过以下方式使用page事件(在浏览页面时使用<pe:blockUI>阻止<p:dataList>).

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>

这不再起作用.页面只是空白，没有错误. <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>.

反正可以在<p:dataList>中模拟这种情况吗?

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

推荐答案

正如我从支持它.

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