<p:dataTable> 中的 rowsPerPage 或页面更改时如何更新其他组件

Question

我想更新一个组件，显示与 primefaces 数据表的当前页面中显示的信息相关的数据，但我找不到任何有关拦截 ajax 事件的信息，例如 onRowsPerPageChange 或 onPageChanged。

有什么办法吗？

使用 primefaces 3.0.M3 和 Glassfish 3.1

这是我的桌子。我要更新的组件是第一个页脚内的另一个 dataTable：

<p:dataTable id="timbrature_dt" 
                                 value="#{timbratureMBean.dataModel}" 
                                 paginator="true"
                                 rows="12" 
                                 lazy="true"
                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
                                 rowsPerPageTemplate="6,12,24" 
                                 currentPageReportTemplate="#{msgs.pagina} {currentPage} #{msgs.of} {totalPages}"
                                 var="tdett"
                                 widgetVar="ttable"
                                 selection="#{timbratureMBean.selezione}" 
                                 selectionMode="single">
                        <p:ajax event="rowSelect" listener="#{timbratureMBean.onRowSelect}"   
                                update="display :timbrature_dt:giustificativi_dt" 
                                oncomplete="timbDialog.show()" />  
                        <f:facet name="header">
                            <h:panelGrid columns="1" columnClasses="columnclass-noborders">
                                <p:outputPanel>
                                    <h:outputText value="#{msgs.dal}:  " />
                                    <p:calendar value="#{timbratureMBean.daData}" 
                                                pattern="dd/MM/yyyy" 
                                                locale="it" 
                                                showButtonPanel="true" 
                                                navigator="true"
                                                mindate="01/01/2003" 
                                                maxdate="#{timbratureMBean.oggi}">
                                        <p:ajax event="dateSelect" listener="#{timbratureMBean.dataChangeListener}" 
                                                update="timbrature_dt :timbrature_dt:giustificativi_dt" /> 
                                    </p:calendar>
                                    <h:outputText value="  #{msgs.al}:  " />
                                    <p:calendar value="#{timbratureMBean.aData}" 
                                                pattern="dd/MM/yyyy" 
                                                locale="it" 
                                                showButtonPanel="true" 
                                                navigator="true"
                                                mindate="01/01/2003" 
                                                maxdate="#{timbratureMBean.oggi}">
                                        <p:ajax event="dateSelect" listener="#{timbratureMBean.dataChangeListener}" 
                                                update="timbrature_dt :timbrature_dt:giustificativi_dt" /> 
                                    </p:calendar>
                                </p:outputPanel>
                                <h:outputText value="#{msgs.timbrature}"/>
                            </h:panelGrid>

                        </f:facet>
                        <p:column>
                            <f:facet name="header">  
                                #{msgs.data_comp}  
                            </f:facet>  
                             <amp:outputData value="#{tdett.sDtComp}"/> 
                        </p:column>

                        <p:column>
                            <f:facet name="header">  
                                #{msgs.data_reale}  
                            </f:facet>  
                             <amp:outputData value="#{tdett.sDtTimb}"/> 
                        </p:column>

                        <p:column>
                            <f:facet name="header">  
                                #{msgs.terminale}  
                            </f:facet>  
                            <h:outputText value="#{tdett.nrTer}"/> 
                        </p:column>

                        <p:column filterBy="#{tdett.eU}" filterOptions="#{timbratureMBean.euOptionList}">
                            <f:facet name="header">  
                                #{msgs.verso}  
                            </f:facet>  
                            <h:panelGroup>
                                <h:outputText value="#{msgs.entrata}" rendered="#{tdett.eU == 'E'}"/> 
                                <h:outputText value="#{msgs.uscita}"  rendered="#{tdett.eU == 'U'}"/> 
                            </h:panelGroup>
                        </p:column>

                        <p:column>
                            <f:facet name="header">  
                                #{msgs.ora_valida}  
                            </f:facet>  
                            <h:outputText value="#{tdett.oraValida}"/> 
                        </p:column>

                        <p:column>
                            <f:facet name="header">  
                                #{msgs.ora_reale}  
                            </f:facet>  
                            <h:outputText value="#{tdett.oraReale}"/> 
                        </p:column>

                        <f:facet name="footer">
                            <p:dataTable id="giustificativi_dt" 
                                         value="#{timbratureMBean.dataList}" 
                                         var="gius"
                                         widgetVar="gtable">
                                <f:facet name="header">
                                    <h:panelGrid columns="1" columnClasses="columnclass-noborders">
                                        <h:outputText value="#{msgs.giustificativi}"/>
                                    </h:panelGrid>

                                </f:facet>
                                <p:column>
                                    <f:facet name="header">  
                                        #{msgs.voce}  
                                    </f:facet>  
                                    <h:outputText value="#{gius.voce}"/> 
                                </p:column>

                                <p:column>
                                    <f:facet name="header">  
                                        #{msgs.dal}  
                                    </f:facet>  
                                    <amp:outputData value="#{gius.sDtIGius}"/> 
                                </p:column>

                                <p:column>
                                    <f:facet name="header">  
                                        #{msgs.al}  
                                    </f:facet>  
                                    <amp:outputData value="#{gius.sDtFGius}"/> 
                                </p:column>

                                <p:column>
                                    <f:facet name="header">  
                                        #{msgs.nr_giorni}  
                                    </f:facet>  
                                    <h:outputText value="#{gius.nrGiorni}"/>
                                </p:column>
                                <p:column>
                                    <f:facet name="header">  
                                        #{msgs.ora_inizio}  
                                    </f:facet>  
                                    <amp:outputNvl value="#{gius.oraIGius}" nullval="-"/>
                                </p:column>
                                <p:column>
                                    <f:facet name="header">  
                                        #{msgs.ora_fine}  
                                    </f:facet>  
                                    <amp:outputNvl value="#{gius.oraFGius}" nullval="-"/>

                                </p:column>
                                <p:column>
                                    <f:facet name="header">  
                                        #{msgs.nr_ore}  
                                    </f:facet>
                                    <amp:outputNvl value="#{gius.nrOre}" nullval="-"/>
                                </p:column>
                                <p:column>
                                    <f:facet name="header">  
                                        #{msgs.nr_minuti}  
                                    </f:facet>
                                    <amp:outputNvl value="#{gius.nrMinuti}" nullval="-"/>
                                </p:column>
                            </p:dataTable> 
                        </f:facet>
                    </p:dataTable> 

                    <p:dialog header="Info" widgetVar="timbDialog" resizable="false"  
                              width="200" showEffect="clip" hideEffect="clip">  

                        <h:panelGrid id="display" columns="2" cellpadding="4">  

                            <h:outputText value="Data:" style="font-weight: bold"/>  
                            <amp:outputData value="#{timbratureMBean.selezione.sDtComp}" />  

                            <h:outputText value="Pausa pranzo ridotta: "  style="font-weight: bold"/>  
                            <h:outputText value="#{timbratureMBean.gestPausaPranzo}" />  

                            <h:outputText value="Timbratura non allineata: "  style="font-weight: bold"/>  
                            <h:outputText value="#{timbratureMBean.timbNonAllineate}" />  

                        </h:panelGrid>  
                    </p:dialog>

Answer 1

我的解决方案是使用 Primefaces 5.2.x。

我找到了一种非常简单的方法来实现这一点，我在使用 udik 的解决方案时遇到的一个问题是，当调用 onPaginate() 方法时，它没有最新的选定值。

所以我这样做是为了确保您始终拥有最新的值，并且可以将其保存/加载到数据库或 cookie 或其他东西（我们保存到 cookie）。

<p:dataTable
        .....
        paginator="true"
        paginatorPosition="bottom"
        paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        currentPageReportTemplate="Total records: {totalRecords}, showing page {currentPage} of {totalPages}"
        rowsPerPageTemplate="25,50,100"
        rows="#{controller.rowsPerPage}"
        .....
    >
        .....
        <p:ajax event="page" oncomplete="rowsPerPageUpdate()" />
        .....
</p:dataTable>
<p:remoteCommand name="rowsPerPageUpdate" actionListener="#{controller.onPaginate}" />

然后我们的控制器看起来像这样：

@Dependent
@Named
public class TableController implements Serializable {
    private String rowsPerPage = "25"; //default value
    .....
    public void onPaginate() {
        //save to the cookie
    }
    .....
}

基本上魔法发生在 remoteCommand 中，它会在 ajax 事件之后触发，以确保 controller.rowsPerPage 已正确更新。

Answer 2

侯，

有换页的事件，看这里

http://cagataycivici.wordpress.com/2011/06/10/datatable-hooks/

<p:datatable paginator="true" rows="10" value="#{bean.items}" var="item">
   <p:ajax event="page" listener="#{bean.onPaginate}" update="othercomponents" oncomplete="alert('done')"... />
   ...

虽然我仍在寻找 onChangeRows 的事件

但是，我当前的问题只是存储用户选择，实际上页面事件解决了存储我是什么页面以及选择了多少行的问题。如果 onPaginate 以这种方式实现：

public void onPaginate(PageEvent event){
        logger.info("I am on page:"+event.getPage());
        logger.info("Rows per page set:"+((org.primefaces.component.datatable.DataTable)event.getSource()).getRows());
    }

您可以查看您所在的页面以及选择了多少行。当您更改页面或更改显示的行数时，都会触发此事件。