[英]update datatable footer primefaces (facet or columnGroup)
I want to make a footer in dataTable and I need to update when the values inside the DT changes. 我想在dataTable中设置一个页脚,我需要在DT内部的值发生变化时进行更新。
The problem is that ajax update simply don't occurs. 问题是ajax更新根本不会发生。
I've tried two ways: 我尝试了两种方法:
<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>
The update doesn't occurs... 更新不会发生......
second way (based on this answer on SO: How to ajax update an item in the footer of a PrimeFaces 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>
I've also tried 我也试过了
<p:remoteCommand name="refreshFooter" update=":form:outputMediaAvaliacao"/>
If I put 如果我放
<p:ajax event="change"
update=":form:dataTableAvaliacao:mediaAluno, :form:dataTableAvaliacao" />
in the first way, it works, but I don't wanna update all dataTable every time. 在第一种方式,它的工作原理,但我不想每次都更新所有dataTable。
What I'm doing wrong? 我做错了什么? is it a bug? 这是一个错误吗?
Referring on 2nd way from your question that you based on this answer ... 请参考您的问题的第二路 ,基于这个答案 ...
actually it is possible to update p:dataTable
footer (even from within table itself)...but with one modification of your code. 实际上可以更新p:dataTable
页脚(甚至可以从表内部更新)......但是只需对代码进行一次修改即可。
Reason why your implementation does not work is that you did not take into account that <h:outputText id="outputMediaAvaliacao"../>
is wrapped with ui:repeat
. 你的实现不起作用的 原因是你没有考虑到<h:outputText id="outputMediaAvaliacao"../>
用ui:repeat
包装。
In that case, p:remoteCommand
is not able to find h:outputText
component ID defined in update
attribute because that ID does not exist in DOM : 在这种情况下, p:remoteCommand
无法找到update
属性中定义的h:outputText
组件ID,因为DOM 中不存在该ID:
ui:repeat
is actually copying h:outputText
as many times as list from value
attribute is long and appending all parent IDs to newly created native HTML components 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>
...
(you can see the same using DOM inspector of your favorite browser) (您可以使用自己喜欢的浏览器的DOM检查器看到相同的内容)
SOLUTION 解
After you learn and understand all facts stated above (like I did :) ), solution is quite simple: 在您了解并理解上述所有事实(就像我做:)之后,解决方案非常简单:
wrap ui:repeat
with some parent element and assign ID to parent element. wrap ui:repeat
使用某个父元素ui:repeat
并将ID分配给父元素。 For example like this 比如这样
<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>
and modify p:ajax
of p:inputText
to update newly created element after text is changed 并修改p:ajax
p:inputText
p:ajax
以在更改文本后更新新创建的元素
<p:ajax event="change" update=":form:dataTableAvaliacao:footerPanel" />
On this way all children elements of h:panelGroup
will be updated (meaning only footer will be updated and not entire table). 这样, h:panelGroup
所有子元素都将被更新(意味着只更新页脚而不是整个表)。
And now, after you solved updating, you can focus on designing of all UI elements under h:panelGroup to make them fit your requirements. 现在,在您解决了更新之后,您可以专注于设计h:panelGroup下的所有UI元素,以使它们符合您的要求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.