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页脚（甚至可以从表格内部更新）......但只需对代码进行一次修改。

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

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

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:ajax的{{1}}以在文本更改后更新新创建的元素

p:inputText

通过这种方式，<p:ajax event="change" update=":form:dataTableAvaliacao:footerPanel" />的所有子元素都会更新（意味着只会更新页脚，而不是整个表格。）

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

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

1 个答案: