如果在素数面数据表中添加新行，如何检测表单中的变化

How to detect change in form if added a new row in prime faces datatable

本文关键字：何检测 检测 变化 表单 数据表 新行 添加 如果      更新时间：2023-09-26

我需要在页面加载时禁用页面中的保存和取消按钮。如果用户更改了页面中的某些内容，我应该启用保存和取消按钮。为此，我使用
http://plugins.jquery.com/are-you-sure/

这个插件运行良好，但在许多场景中都需要自定义，比如下面的

我有一个类似项目组的页面，它由三个面板组成。

LeftPanel：系统中项目组的列表
中心面板：分配给选定项目组的项目列表
RightPanel：分配给项目组的项目列表

现在假设我有一个数据表

 <p:dataTable var="itms" value="#{myBean.listOfItems}" rows="10"
    paginator="true"
    paginatorTemplate="{CurrentPageReport}  
                       {FirstPageLink} 
                       {PreviousPageLink} 
                       {PageLinks}  
                       {NextPageLink} 
                       {LastPageLink} 
                       {RowsPerPageDropdown}"  
    rowsPerPageTemplate="10,50,100">
 </p:dataTable>

要将项目分配到项目组，我会在右侧面板中选择项目，然后单击分配按钮，该按钮将添加到项目列表中，以显示在中央面板中

 listOfItems.addAll(selectedItems);

我在分配按钮oncomplete上调用插件中定义的重新扫描方法来检测更改并跟踪添加的新记录，因为我想将添加或删除字段也视为一种更改。

现在在页面加载上，如果选择了一个项目组，并且它分配了13个项目，那么我可以看到第一页有10条记录。如果添加了任何项目，则它们将被添加到后端列表的列表中。由于我在第一个页面，页面上有完整的行，插件无法找到任何形式的更改。

如何在这种情况下找到变化。

由于您说您希望将任何字段的添加或删除都视为一项更改，以确保您的用户保存更改，因此有一种方法可以这样做：

你可以有一个隐藏的输入：

<h:inputHidden id="hiddenInput" />

在你提到的分配按钮oncomplete中，你可以添加：

oncomplete="$('#hiddenInput').val('dirty').change();"

这会将"dirty"字符串（例如）添加到隐藏的输入中，并调用change()来告诉插件发生了变化，插件会将表单标记为dirty（changed）。

在保存按钮的oncomplete中，您所要做的就是清除该值并重新初始化插件以重新启动：

oncomplete="$('#hiddenInput').val('');$('#formId').trigger('reinitialize.areYouSure');"

此外，最好添加一些检查或在操作（链接）结束时进行检查。

注意：如果添加和删除同一个"项目"，从技术上讲没有更改，但您想保持表单的更改状态，对吗？这个解决方案将适用于此。如果我错了，你想处理这个特殊的案件，请纠正我。您必须添加一些逻辑，在这些逻辑中，您可以比较旧值和新值，并相应地清除或弄脏隐藏的输入。

相关文章：