jsf - 更新数据表页脚素面(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" />

在第一种方式中，它有效，但我不想每次都更新所有数据表。

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

Answer 1

引用 第二种方式 从您基于此的问题 answer ...

实际上有可能更新 p:dataTable页脚(甚至来自表格本身)...但对您的代码进行了一次修改。

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

在这种情况下，p:remoteCommand无法找到 h:outputText在 update 中定义的组件 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:ajax的 p:inputText在文本更改后更新新创建的元素

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

一路上都 child h:panelGroup 的元素将被更新(意味着只会更新页脚而不是整个表格)。

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