使用 Ajax 更新 Primefaces 数据表摘要行

Question

如何在提交表单（对话框）后更新 primefaces 数据表摘要行？

数据表在一些 CRUD 操作后已经正确更新，但摘要行没有。我在过滤数据表时使用 p:remoteCommand 更新摘要行，它工作正常。

List.xhtml:

<h:form id="TreinamentosListForm">
<p:panel header="#{treinaBundle.ListTreinamentosTitle}" >
    <p:remoteCommand name="updateFooterSumCountId" update="datalist:footerSumCountId" />
    <p:dataTable id="datalist"
                filteredValue="#{treinamentosController.filteredTreinamentos}"
                value="#{treinamentosController.items}"
                var="item"
                rowKey="#{item.id}"
                paginator="true"
                selectionMode="single"
                selection="#{treinamentosController.selected}">
        <p:ajax event="filter" process="@form" update="@this" listener="#{treinamentosController.onFilter}" oncomplete="updateFooterSumCountId()" />
        <p:ajax event="rowSelect"   update=":TreinamentosListForm:createButton :TreinamentosListForm:viewButton :TreinamentosListForm:editButton :TreinamentosListForm:deleteButton :TreinamentosListForm:TreinamentosDataTableContextMenu" listener="#{treinamentosController.resetParents}"/>
        <p:ajax event="rowUnselect" update=":TreinamentosListForm:createButton :TreinamentosListForm:viewButton :TreinamentosListForm:editButton :TreinamentosListForm:deleteButton :TreinamentosListForm:TreinamentosDataTableContextMenu" listener="#{treinamentosController.resetParents}"/>
        <p:ajax event="rowDblselect" onsuccess="document.getElementById('TreinamentosListForm:viewButton').click();"/>

        <p:column sortBy="#{item.id}" filterBy="#{item.id}" style="text-align: right">
            <f:facet name="header">
                <h:outputText value="#{treinaBundle.ListTreinamentosTitle_id}"/>
            </f:facet>
            <h:outputText value="#{item.id}"/>
        </p:column>

        <p:columnGroup id="totalGroup"  rendered="true" type="footer" >
            <p:row>
                <p:column style="text-align:right">
                    <f:facet name="footer">
                        <!-- the summary row: -->
                        <h:outputText id="footerSumCountId" value="#{treinamentosController.sumCountId}" />
                    </f:facet>
                </p:column>
            </p:row>
        </p:columnGroup>        
    </p:dataTable>
    <f:facet name="header">
        <p:commandButton id="createButton" icon="ui-icon-plus"   value="#{treinaBundle.Create}" actionListener="#{treinamentosController.prepareCreate}" update=":TreinamentosCreateForm" oncomplete="PF('TreinamentosCreateDialog').show()"/>
        <p:commandButton id="viewButton"   icon="ui-icon-search" value="#{treinaBundle.View}" update=":TreinamentosViewForm" oncomplete="PF('TreinamentosViewDialog').show()" disabled="#{empty treinamentosController.selected}"/>
        <p:commandButton id="editButton"   icon="ui-icon-pencil" value="#{treinaBundle.Edit}" update=":TreinamentosEditForm" oncomplete="PF('TreinamentosEditDialog').show()" disabled="#{empty treinamentosController.selected}"/>
        <p:commandButton id="deleteButton" icon="ui-icon-trash"  value="#{treinaBundle.Delete}" actionListener="#{treinamentosController.delete}" update=":growl,datalist" disabled="#{empty treinamentosController.selected}">
        <p:confirm header="#{treinaBundle.ConfirmationHeader}" message="#{treinaBundle.ConfirmDeleteMessage}" icon="ui-icon-alert"/>
        </p:commandButton>
    </f:facet>
</p:panel>
<ui:include src="/WEB-INF/include/confirmation.xhtml"/>
</h:form>

Create.xhtml:

<p:dialog id="TreinamentosCreateDlg" widgetVar="TreinamentosCreateDialog" modal="true" resizable="false" appendTo="@(body)" header="#{treinaBundle.CreateTreinamentosTitle}" closeOnEscape="true" > 
    <h:form id="TreinamentosCreateForm">

        <h:panelGroup id="display" rendered="#{treinamentosController.selected != null}">
            <p:panelGrid columns="2" columnClasses="column">

                <p:outputLabel value="#{treinaBundle.CreateTreinamentosLabel_id}" for="id" />
                <p:outputLabel id="id" value="Value automatically generated from database." title="#{treinaBundle.CreateTreinamentosTitle_id}" />

            </p:panelGrid>
            <p:commandButton actionListener="#{treinamentosController.saveNew}" value="#{treinaBundle.Save}" update="@all,display,:TreinamentosListForm:datalist,:growl" oncomplete="handleSubmit(xhr,status,args,PF('TreinamentosCreateDialog'));">
                <p:confirm header="#{treinaBundle.ConfirmationHeader}" message="#{treinaBundle.ConfirmCreateMessage}" icon="ui-icon-alert"/>
            </p:commandButton>

            <p:commandButton value="#{treinaBundle.Cancel}" onclick="PF('TreinamentosCreateDialog').hide()"/>
        </h:panelGroup>
    </h:form>
</p:dialog>

提前致谢。

Answer 1

阅读 Primefaces 5 文档后，我所做的是调用（在 Create.xhtml 中）Primefaces 过滤器方法，通过目标数据表（在 List.xhtml 中）定义的 widgetVar 进行引用。这样做会触发我的 p:remoteCommand，而后者又会触发摘要行的更新：

<p:commandButton actionListener="#{treinamentosController.saveNew}" value="#{treinaBundle.Save}" update="@this,display,:TreinamentosListForm:datalist,:growl" oncomplete="handleSubmit(xhr,status,args,PF('TreinamentosCreateDialog'),PF('treinamentosTable').filter());" >
    <p:confirm header="#{treinaBundle.ConfirmationHeader}" message="#{treinaBundle.ConfirmCreateMessage}" icon="ui-icon-alert"/>
</p:commandButton>

如果有人有更优雅的解决方案，请分享。我没时间

使用 Ajax 更新 Primefaces 数据表摘要行

Updating Primefaces datatable summary row using Ajax

ajax

datatable

jsf

primefaces