在 PrimeFaces 中将页面事件与 p:dataList 一起使用

2024-01-10

Does a <p:dataList> http://www.primefaces.org/showcase/ui/data/dataList.xhtml支持page事件?我正在尝试使用page事件以下列方式(阻止<p:dataList> using <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> anyway?


正如我从源代码 https://github.com/primefaces/primefaces/blob/6922ec428149c29b84c66f8934f34001589996e8/src/main/java-templates/org/primefaces/component/datalist/DataListTemplate.java#L31 that page事件不支持dataList, 另一方面dataGrid 支持它 https://github.com/primefaces/primefaces/blob/6922ec428149c29b84c66f8934f34001589996e8/src/main/java-templates/org/primefaces/component/datagrid/DataGridTemplate.java#L25.

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

这是一个例子: 假设你的数据列表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');
   }
 }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 PrimeFaces 中将页面事件与 p:dataList 一起使用 的相关文章

随机推荐