更新数据表页脚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上的答案:如何ajax更新PrimeFaces dataTable页脚中的项目？):

<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:ajax event="change"
                update=":form:dataTableAvaliacao:mediaAluno, :form:dataTableAvaliacao" />

在第一种方式,它的工作原理,但我不想每次都更新所有dataTable.

我做错了什么？这是一个错误吗？

Answer 1

根据您的问题的第二种方式，您基于此答案......

\n\n

实际上，可以更新p:dataTable页脚（甚至从表本身内部）......但只需对代码进行一项修改即可。

\n\n

您的实现不起作用的原因是您没有考虑到<h:outputText id="outputMediaAvaliacao"../>用ui:repeat.

\n\n

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

\n\n

ui:repeat实际上是复制 h:outputText属性列表的次数value，并将所有父 ID 添加到新创建的本机 HTML 组件中

\n\n

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

\n\n

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

\n\n

解决方案

\n\n

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

\n\n

用一些父元素包装ui:repeat并将 ID 分配给父元素。例如像这样

\n\n

<f:facet name="footer">\n    <h:outputText value="Nota m\xc3\xa9dia da avalia\xc3\xa7\xc3\xa3o:"/>\n\n    <h:panelGroup id="footerPanel">\n        <ui:repeat value="#{alunoAvaliacaoMB.colunasAvaliacoes}"\n                   var="avaliacao" id="avaliacao">\n             <h:outputText id="outputMediaAvaliacao" value="#{alunoAvaliacaoMB.getMediaAvaliacao(avaliacao.property)}" />\n        </ui:repeat>\n     </h:panelGroup>\n</f:facet>\n

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n