如何使用ajax更新PrimeFaces数据表页脚中的项目？

这是我拥有的表格的视觉效果：

+---------+------------+-------------------+ | 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 | +------------------------------------------+ +---------+------------+-------------------+ |校长1 |校长2 |校长3| +---------+------------+-------------------+ |A行|输入A |计算输出A| |B行|输入B |计算输出B| |等等!等等!等等| +---------+------------+-------------------+ |总计：总计算输出| +------------------------------------------+ 以及精简的代码：

<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

，包含一个字符串和两个整数，只有getter和setter。

myBean.changeListener

计算给定行第一个整数的第二个整数，以及所有行的总和

所以，当我输入其中一个输入，然后调出焦点时，会调用侦听器并完成计算，但在屏幕上，第三列中的值会发生变化，但总数始终保持为零。我很确定这与PrimeFaces将行索引附加到每个输入和输出的生成id有关，但我不知道如何在页脚中获得输出（其生成的id是

mainForm:myTable:0:outputTotal

）

现在，我可以更新父表了。但是，每当接收焦点的输入是更新目标的一部分时，焦点就会丢失，并且我遵守非常严格的可访问性规则，即此表必须是键盘友好的（键入数字、制表符、键入数字、制表符等）

我试过：

• update=“：outputTotal”（给定异常无法找到标识符为的组件…）
• update=“myTable:0:OutputToA（相同的异常）
• update=“myTable:outputTotal”（无更新，总计为零）
• 将文本包装在panelGroup中并更新（无更新）

---

（使用MyFaces未知版本的PrimeFaces 3.5.0）

您不能从表中真正更新表的值。但是，您可以使用

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>

---

祝你好运！

如果你不想创建

p:remoteCommand

s来更新数据表

过滤器

事件上的组件（我不想），你可以使用：

诚然，这看起来有点混乱，但您可以创建一个自定义EL函数，将其简化为：

<p:ajax event="cellEdit" partialSubmit="true" listener="#{myBean.onCellEdit}" 
    process="@this" oncomplete="refreshFooter();"/>