更新数据表页脚 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 的回答：How to ajax update an item in the footer of a 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

根据你的问题第二种方式，你基于此 answer...

实际上 有可能 更新 p:dataTable 页脚（甚至从 table 本身内部更新）...但只需对您的代码进行一次修改。

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

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

ui:repeat 实际上是复制 h:outputText 与 value 属性中的列表一样长并追加所有新创建的本机 HTML 组件的父 ID

<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 inspector 查看相同内容）

解决方案

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

用一些父元素包装 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 的所有 children 元素都将被更新（意味着只有页脚将被更新，而不是整个 table）。

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

更新数据表页脚 primefaces（facet 或 columnGroup）

update datatable footer primefaces (facet or columnGroup)

datatable

jsf

primefaces