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

Question

这是我的桌子的外观：

+ --------- + ------------ + ------------------- +
| 标头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<SomeOtherBean>一个字符串和两个整数，只有getter和setter。在myBean.changeListener计算第二整数从第一给定的行，也总让所有行。

因此，当我输入其中一个输入然后进行聚焦时，将调用侦听器并完成计算，但是在屏幕上，第三列中的值发生了变化，但总数固执地保持为零。我相当确定这与PrimeFaces关联，该行将行索引附加到每个输入和输出的生成ID中，但是我不知道如何在页脚中找到输出（生成的ID为mainForm:myTable:0:outputTotal）。

现在，我可以更新父表。但是，只要接收焦点的输入是更新目标的一部分，焦点就会丢失，而且我在极其严格的可访问性规则下，该表 必须
是键盘友好的（键入数字，制表符，键入数字，制表符等。） ）

我努力了：

• update =“：outputTotal”（产生异常，无法找到具有标识符的组件…）
• update =“ myTable：0：outputTota（相同的例外）
• update =“ myTable：outputTotal”（不更新，总计保持零）
• 将文本包装在panelGroup中并更新（不更新）

（带有MyFaces未知版本的PrimeFaces 3.5.0）

Answer 1

您实际上无法从表中更新表的值。但是，您可以使用它p:remoteCommand来实现。另外，我可能会使用对整个表cellEdit事件（而不是单个p:ajax你的pe:inputNumber）。总体结果将是：

<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，并摆脱掉p:ajax内部pe:inputNumber

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

祝好运！