更新Primefaces数据表格的页脚（使用facet或columnGroup）。

Question

我希望在dataTable中制作页脚，并且需要在DT内部的值改变时进行更新。

问题是ajax更新根本没有发生。

我尝试了两种方法：

<p:dataTable 
    id="dataTableAvaliacao" var="aluno"
    value="#{alunoAvaliacaoMB.alunos}">
    <p:column>
        <p:inputText id="inputNota"
            value="#{aluno.getNota(avaliacao.property).vlNotaString}">

            <p:ajax event="change"
                update=":form:dataTableAvaliacao:mediaAluno, :form:dataTableAvaliacao:mediaAvaliacao" />
        </p:inputText>
    </p:column>             

    <p:columnGroup type="footer" id="mediaAvaliacao">

        <p:row>
            <p:column
                 footerText="Nota média da avaliação" />
        </p:row>

        <p:row>
            <ui:repeat value="#{alunoAvaliacaoMB.colunasAvaliacoes}"
                var="avaliacao">
                <p:column id="colunaMedia" 
                    footerText="#{alunoAvaliacaoMB.getMediaAvaliacao(avaliacao.property)}"/>

            </ui:repeat>
        </p:row>                        
    </p:columnGroup>
<p:dataTable>   

更新未发生...

第二种方法（基于SO上的这个答案：如何在PrimeFaces dataTable的页脚中使用ajax更新项目？）：

<p:remoteCommand name="refreshFooter" update=":form:dataTableAvaliacao:outputMediaAvaliacao"/>
<p:dataTable 
    id="dataTableAvaliacao" var="aluno"
    value="#{alunoAvaliacaoMB.alunos}">

    <p:column>
        <p:inputText id="inputNota"
            value="#{aluno.getNota(avaliacao.property).vlNotaString}">

            <p:ajax event="change"
                update=":form:dataTableAvaliacao:mediaAluno" oncomplete="refreshFooter();" />

        </p:inputText>
    </p:column>             
<p:dataTable>           

<f:facet name="footer">
    <h:outputText colspan="1" value="Nota média da avaliação:"/>

    <ui:repeat value="#{alunoAvaliacaoMB.colunasAvaliacoes}"
        var="avaliacao">

        <h:outputText id="outputMediaAvaliacao"
            value="#{alunoAvaliacaoMB.getMediaAvaliacao(avaliacao.property)}" 
    </ui:repeat>
</f:facet>

我也尝试过。

<p:remoteCommand name="refreshFooter" update=":form:outputMediaAvaliacao"/>

如果我输入 <\p>

<p:ajax event="change"
                update=":form:dataTableAvaliacao:mediaAluno, :form:dataTableAvaliacao" />

在第一种方式中，它可以工作，但我不想每次更新所有的dataTable。我做错了什么？这是一个bug吗？

- Johnny Willer

Answer 1

参考您基于此答案的问题中的第二种方式...

实际上，有可能更新p:dataTable的页脚（甚至从表格内部更新）……但需要修改您的代码。

原因是您没有考虑到<h:outputText id="outputMediaAvaliacao"../>被ui:repeat包装的情况。

在这种情况下，p:remoteCommand无法在DOM中找到update属性中定义的h:outputText组件ID，因为该ID在DOM中不存在：

ui:repeat 实际上是将 h:outputText 复制了多次，次数与从 value 属性中获取的列表长度相同，并将所有父 ID 添加到新创建的本地 HTML 组件中。

<span id="form:dataTableAvaliacao:avaliacao:0:outputMediaAvaliacao">...</span>
<span id="form:dataTableAvaliacao:avaliacao:1:outputMediaAvaliacao">...</span>
<span id="form:dataTableAvaliacao:avaliacao:2:outputMediaAvaliacao">...</span>
...

（你可以使用喜欢的浏览器的DOM检查器来查看相同的内容）

解决方案

当你学习并理解了上述所有事实（就像我一样 :)），解决方案就很简单：

将ui：repeat用一些父元素包装起来，并为父元素分配ID。例如像这样：

<f:facet name="footer">
    <h:outputText value="Nota média da avaliação:"/>

    <h:panelGroup id="footerPanel">
        <ui:repeat value="#{alunoAvaliacaoMB.colunasAvaliacoes}"
                   var="avaliacao" id="avaliacao">
             <h:outputText id="outputMediaAvaliacao" value="#{alunoAvaliacaoMB.getMediaAvaliacao(avaliacao.property)}" />
        </ui:repeat>
     </h:panelGroup>
</f:facet>

将p:inputText的p:ajax修改为在文本更改后更新新创建的元素

<p:ajax event="change" update=":form:dataTableAvaliacao:footerPanel" />

在这种方式下，h:panelGroup 的所有子元素都将被更新（意味着只有页脚会被更新而不是整个表格）。

现在，在解决更新问题之后，您可以专注于设计 h:panelGroup 下的所有UI元素，使它们符合您的要求。

- Dusan Kovacevic