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

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  |+------------------------------------------+

And the stripped-down code:

<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(同样的异常(exception))

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

祝你好运!