Как обновить другие компоненты, когда rowPerPage или страница изменяется в - PullRequest
Новая
       18

Как обновить другие компоненты, когда rowPerPage или страница изменяется в

0 голосов
/ 14 сентября 2011

Я хотел бы обновить компонент, показывающий данные, относящиеся к информации, отображаемой на текущей странице простой таблицы dataTable, но я не смог найти никакой информации о перехвате событий ajax, таких как onRowsPerPageChange или onPageChanged.Любой способ сделать это?

Использование Primefaces 3.0.M3 и Glassfish 3.1

Вот моя таблица.Компонент, который я хочу обновить, представляет собой еще одну таблицу данных в нижнем колонтитуле первого: 

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

Ответы [ 2 ]

3 голосов
/ 24 ноября 2011

Хоу,

есть событие для смены страницы, см. Здесь

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());
    }

Вы можете видеть, на какой странице вы находитесь и сколько строк выбрано. И это событие вызывается как при изменении страницы, так и при изменении количества отображаемых строк.

2 голосов
/ 09 октября 2015

Мое решение использует 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 был должным образом обновлен.

...