使用 Ajax 仅更新 ui:repeat 而不是所有表单答案

【问题标题】：Use Ajax to update only ui:repeat instead of all form使用 Ajax 仅更新 ui:repeat 而不是所有表单
【发布时间】：2016-01-12 17:07:58
【问题描述】：

在我的应用程序中呈现某些数据时遇到了一些问题。为简单起见，我有一个 h:form，其中包含一个表，其中 ui:repeat 在 tbody 中。让我们举个例子（我没有放所有代码，因为它会太长）：

<h:form id="sequence-assemblage-form">
    <ui:fragment>
        <table id="table-fils">
            <thead>
                ...
            </thead>
            <tbody>
                <ui:repeat id="fil">
                    <tr>
                        many <td> one after another
                        <ui:fragment>
                            <td>
                                <h:panelGroup id="actionsEditing" rendered="">
                                                        <h:inputHidden id="filHarnaisId" value="#{fil.id}"/>

                                                        <h:commandLink styleClass="icon-20 icon-save" id="save">
                                                            <f:ajax execute="@form" render="" listener="doesAnAction"/>
                                                            <f:ajax execute="@form" render="@form" listener="doesAnotherAction"/>
                                                            <f:ajax execute="@form" render=":integrite-form :message-integrite-panel" onevent="verifierIntegrite"/>
                                                        </h:commandLink>
                                                        <h:commandLink styleClass="icon-20 icon-rollback" id="rollback" action="">
                                                            <f:ajax execute="@this" render="@form" />
                                                        </h:commandLink>
                                                    </h:panelGroup>
                            </td>
                        </ui:fragment>
                    </tr>
                </ui:repeat>
            </tbody>
        </table>
    </ui:fragment>
</h:form>

我的问题是，每次我保存时，它都会完整地呈现表单，当我的表包含许多行时，这会导致性能问题（你知道，每次保存时页面都需要 10 秒以上的时间来加载？）。有没有办法让它只呈现我当前正在编辑的行？

我不知道问题出在f:ajax execute 还是f:ajax render，但我需要找出问题所在并找到性能解决方案。

祝你有美好的一天谢谢！

编辑： 我在尝试找到一个解决方案时注意到，其中一个侦听器更改了我的 bean 中的一个值，并且这个值是渲染一个重要的脚本以触发保存所必需的（见下文）

<h:outputScript rendered="#{fil.modifie}">
    showNoticeChangementDialog();
</h:outputScript>

这些代码行就在我的ui:repeat 的末尾之前，这意味着通过仅更新ui:repeat，如果我的值已被修改，它应该会触发对话框？

我尝试将render 和execute 更改为我的ui:repeat 的ID，但它不起作用。

【问题讨论】：

问题与ui:repeat有什么关系？
为什么在一个<h:commandLink> 中包含多个<f:ajax>？在给出的示例中使用它们是没有意义的。每个<h:commandLink> 只使用一个<f:ajax>，并在render 中登记需要更新的组件。
@Kukeltje ：这是相关的，因为我只需要在我的桌子的一行上完成“刷新”，而不是完整的表格（对于我的帖子中所说的性能问题）。这里的 ui:repeat 指的是生成的每一行，还是我错了？
@Tiny ：我没有粘贴所有代码，因为它会太长，但是在创建应用程序时已经这样做了。我已经删除了大部分在 listeners 和许多其他组件中编写的内容，以简化和防止放置太多信息。在原文中，每个 f:ajax 的监听器中都写了一些不同的东西。
其中一个渲染@form将根据示例在每次单击链接时继续渲染表单。

标签： ajax jsf render uirepeat

【解决方案1】：

在同事和particular answer 的帮助下，我设法找到了解决方法。

必须将每个<td> 的内容包装在h:panelGroup 中，并给它们一个唯一的ID。然后我可以在每个元素上使用render 以确保它们已更新。

看起来像这样：<f:ajax render="id1 id2 id3 id4 ..."

【讨论】：