如何阿贾克斯更新的PrimeFaces DataTable的页脚的项目？ [英] How to ajax update an item in the footer of a PrimeFaces dataTable?

问题描述

这是一个可视化的表我有：

This is a visual of the table I have:

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

和简装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＆LT; SomeOtherBean＆GT; 带一个字符串和两个整数，只有getter和setter方法​​。在 myBean.changeListener 计算来自第一，第二整数的给定行，并且也总为所有行

The myBean.someList is an ArrayList<SomeOtherBean> with one String and two Integers, with just getters and setters. The myBean.changeListener calculates the second Integer from the first for the given row, and also the total for all rows.

所以，当我输入的输入之一，那么集中了，就会调用该侦听，并计算完成，但是在屏幕上，在第三列的值发生变化，但总固执地保持为零。我相当肯定，这已经是与PrimeFaces追加行索引生成的ID的每个输入和输出的，但我不知道如何去输出在页脚（其生成的ID为的MainForm：myTable的0：outputTotal ）

So, when I type in one of the inputs then focus out, the listener is called and the calculation done, but on screen, the value in the third column changes, but the total stubbornly remains zero. I'm fairly sure this has something to do with PrimeFaces appending the row index to the generated id's of each input and output, but I can't figure out how to get to the output in the footer (whose generated id is mainForm:myTable:0:outputTotal).

现在，我可以更新父表。但是当输入接收的重点是更新的目标的一部分，重点是输了，而我在极为严格的访问规则，该表的必须的是键盘友好（键入数字，标签，A型号，标签，等...）

Now, I could just update the parent table. However whenever the input to receive focus is part of the update target, the focus is lost, and I am under extremely strict accessibility rules that this table must be keyboard friendly (type a number, tab, type a number, tab, etc...)

我曾尝试：

• 更新=：outputTotal（放弃例外找不到成分与标识...）
• 更新=myTable的0：outputTota（同样的异常）
• 更新=myTable的：outputTotal（没有更新，共撑零）
• 包装在一个panelGroup中的文字和更新（没有更新）

（PrimeFaces 3.5.0与MyFaces的未知版本）

(PrimeFaces 3.5.0 with MyFaces unknown version)

推荐答案

从表中你真的不能更新表的值。但是，您可以使用号码：remoteCommand 来实现这一目标。另外，我可能会使用，而不是一个单一的 P中的cellEdit事件对整个表（：阿贾克斯在 PE：inputNumber ）。总的结果将是：

You can't really update the values of the table from within the table. However, you can use p:remoteCommand to achieve this. Also, I would probably use the cellEdit event on the whole table (instead of a single p:ajax on your pe:inputNumber). The overall result would be:

<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 =真正的到号码：AJAX ，这样你只提交组件的数据。如果你喜欢cellEdit事件的想法，你需要做DataTable中编辑，并添加以下在号码：dataTable中，并摆脱了电话号码：AJAX 的 PE内部：inputNumber

Please note that you might need to add partialSubmit="true" to the p:ajax, this way you only submit the component's data. If you like the cellEdit event idea, you need to make the dataTable editable, and add the following in your p:dataTable, and get rid of the p:ajax inside your pe:inputNumber

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

祝你好运！

这篇关于如何阿贾克斯更新的PrimeFaces DataTable的页脚的项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！