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>，有一个字符串和两个整数，只有getter和setter。 myBean.changeListener计算给定行的第一个整数，以及所有行的总计。

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

现在，我可以更新父表。但是，每当接收焦点的输入是更新目标的一部分时，焦点就会丢失，并且我处于非常严格的可访问性规则中，此表必须是键盘友好的（键入数字，选项卡，键入a数字，标签等......）

我试过了：

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

祝你好运！

Answer 2

如果您不想创建 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')}"/>

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

2 个答案: