如何ajax更新PrimeFaces数据表页脚中的项目? [英] How to ajax update an item in the footer of a PrimeFaces dataTable?

查看:28
本文介绍了如何ajax更新PrimeFaces数据表页脚中的项目?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

<前>+---------+------------+------------+|标题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:列><p:column headerText="Header2"><pe:inputNumber value="#{currentItem.inputVal}"><p:ajax event="change" listener="#{myBean.changeListener}"更新="outputVal outputTotal"/></pe:inputNumber></p:列><p:column headerText="Header3"><h:outputText id="outputVal" value="#{currentItem.outputVal}"/></p:列><f:facet name="footer">全部的:<h:outputText id="outputTotal" value="#{myBean.total}"/></f:facet></p:dataTable>

myBean.someList 是一个 ArrayList,带有一个字符串和两个整数,只有 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 未知版本)

解决方案

您无法真正从表中更新表的值.但是,您可以使用 p:remoteCommand 来实现这一点.另外,我可能会在整个表格上使用 cellEdit 事件(而不是在您的 pe:inputNumber 上使用单个 p:ajax).总体结果是:

...<p:dataTable id="myTable" value="#{myBean.someList}" var="currentItem"><p:column headerText="Header1"><h:outputText value="#{currentItem.name}"/></p:列><p:column headerText="Header2"><pe:inputNumber value="#{currentItem.inputVal}"><p:ajax event="change" listener="#{myBean.changeListener}" process="@this"oncomplete="refreshFooter();"更新=输出值"/></pe:inputNumber></p:列><p:column headerText="Header3"><h:outputText id="outputVal" value="#{currentItem.outputVal}"/></p:列><f:facet name="footer">全部的:<h:outputText id="outputTotal" value="#{myBean.total}"/></f:facet></p:dataTable>

请注意,您可能需要partialSubmit="true" 添加到 p:ajax,这样您只需提交组件的数据.如果你喜欢 cellEdit 事件的想法,你需要使 dataTable 可编辑,并在你的 p:dataTable 中添加以下内容,并去掉你的 p:ajaxpe:inputNumber

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

祝你好运!

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

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>

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.

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).

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...)

I have tried:

  • update=":outputTotal" (gave exception Cannot find component with identifier...)
  • update="myTable:0:outputTota (same exception)
  • update="myTable:outputTotal" (no update, total stays zero)
  • wrap the text in a panelGroup and update that (no update)

(PrimeFaces 3.5.0 with MyFaces unknown version)

解决方案

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>

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

Good luck!

这篇关于如何ajax更新PrimeFaces数据表页脚中的项目?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆