更新可数据页脚的主面(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数据表的页脚?):

<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

我做错了什么?是bug吗?

Answer 1

参考第二种方法从你的问题，你基于这个答案…

实际上是可能的更新p:dataTable页脚(甚至从表本身)…但是只要修改一下你的代码。

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

在这种情况下，p:remoteCommand无法找到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检查器看到相同的内容)

<<p> 解决方案/strong>

在你学习并理解了上述所有事实之后(就像我一样:))，解决方案很简单:

用父元素包裹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元素，使它们符合你的要求。