如何更新PrimeFaces dataTable页脚中的项目？

Question

这是我的表格的视觉效果:

+---------+------------+-------------------+
| 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和两个Integers,只有getter和setter.该myBean.changeListener计算从第一第二个整数给定的行,也总让所有行.

因此,当我输入其中一个输入然后聚焦时,会调用监听器并完成计算,但是在屏幕上,第三列中的值会发生变化,但总数固定为零.我很确定这与PrimeFaces有关,它将行索引附加到每个输入和输出的生成的id,但我无法弄清楚如何获取页脚中的输出(其生成的id是mainForm:myTable:0:outputTotal).

现在,我可以更新父表.但是,每当接收焦点的输入是更新目标的一部分时,焦点就会丢失,并且我在极其严格的可访问性规则下,该表必须是键盘友好的(键入数字,选项卡,键入数字,选项卡等. .)

我试过了:

• update =":outputTotal"(给出异常无法找到带标识符的组件......)
• update ="myTable:0:outputTota(相同的例外)
• update ="myTable:outputTotal"(无更新,总数保持为零)
• 将文本包装在panelGroup中并更新(不更新)

(PrimeFaces 3.5.0与MyFaces未知版本)

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();"/>

祝好运!