[英]How to ajax update an item in the footer of a PrimeFaces dataTable?
这是我拥有的表格的视觉效果:
+---------+------------+-------------------+ | Header1 | Header2 | Header3 | +---------+------------+-------------------+ | Row A | Input A | Calc'ed output A | | Row B | Input B | Calc'ed output B | | etc.. | etc.. | etc.. | +---------+------------+-------------------+ | Total: Total calc'ed output | +------------------------------------------+
和精简的代码:
<p:dataTable id="myTable" value="#{myBean.someList}"
var="currentItem">
<p:column headerText="Header1">
<h:outputText value="#{currentItem.name}" />
</p:column>
<p:column headerText="Header2">
<pe:inputNumber value="#{currentItem.inputVal}">
<p:ajax event="change" listener="#{myBean.changeListener}"
update="outputVal outputTotal" />
</pe:inputNumber>
</p:column>
<p:column headerText="Header3">
<h:outputText id="outputVal" value="#{currentItem.outputVal}" />
</p:column>
<f:facet name="footer">
Total:
<h:outputText id="outputTotal" value="#{myBean.total}" />
</f:facet>
</p:dataTable>
myBean.someList
是一个ArrayList<SomeOtherBean>
带有一个 String 和两个 Integer,只有 getter 和 setter。 myBean.changeListener
计算给定行的第一个整数,以及所有行的总数。
因此,当我输入其中一个输入然后聚焦时,会调用侦听器并完成计算,但在屏幕上,第三列中的值发生变化,但总数顽固地保持为零。 我相当确定这与 PrimeFaces 将行索引附加到每个输入和输出的生成 id 相关,但我无法弄清楚如何到达页脚中的输出(其生成的 id 是mainForm:myTable:0:outputTotal
)。
现在,我可以更新父表。 但是,每当接收焦点的输入是更新目标的一部分时,焦点就会丢失,并且我遵守极其严格的可访问性规则,即该表必须是键盘友好的(键入数字、制表符、键入数字、制表符等。 .)
我试过了:
(PrimeFaces 3.5.0 与 MyFaces 未知版本)
您无法真正从表中更新表的值。 但是,您可以使用p:remoteCommand
来实现此目的。 另外,我可能会在整个表上使用 cellEdit 事件(而不是在pe:inputNumber
上使用单个p:ajax
)。 总体结果将是:
<p:remoteCommand name="refreshFooter" update=":formName:outputTotal"/>
...
<p:dataTable id="myTable" value="#{myBean.someList}" var="currentItem">
<p:column headerText="Header1">
<h:outputText value="#{currentItem.name}" />
</p:column>
<p:column headerText="Header2">
<pe:inputNumber value="#{currentItem.inputVal}">
<p:ajax event="change" listener="#{myBean.changeListener}" process="@this"
oncomplete="refreshFooter();" update="outputVal"/>
</pe:inputNumber>
</p:column>
<p:column headerText="Header3">
<h:outputText id="outputVal" value="#{currentItem.outputVal}" />
</p:column>
<f:facet name="footer">
Total:
<h:outputText id="outputTotal" value="#{myBean.total}" />
</f:facet>
</p:dataTable>
请注意,您可能需要将partialSubmit="true"
添加到p:ajax
,这样您只需提交组件的数据。 如果您喜欢 cellEdit 事件的想法,则需要使 dataTable 可编辑,并在p:dataTable
添加以下内容,并去掉pe:inputNumber
中的p:ajax
<p:ajax event="cellEdit" partialSubmit="true" listener="#{myBean.onCellEdit}"
process="@this" oncomplete="refreshFooter();"/>
祝你好运!
如果您不想创建p:remoteCommand
来更新数据表filter
事件上的组件(好吧,我不想),您可以使用:
<p:ajax event="filter"
oncomplete="PrimeFaces.ab({source:'#{component.clientId}',process:'@none',update:'componentToUpdate'})"/>
确实,这看起来有点乱,但您可以创建一个自定义 EL 函数以将其简化为:
<p:ajax event="filter"
oncomplete="#{my:ajaxUpdate('componentToUpdate')}"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.