javascript - 如果在 primefaces 数据表中添加新行，如何检测表单的变化

Question

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

这个插件工作正常，但在很多情况下都需要定制，如下所示

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

LeftPanel:系统中的项目组列表
CenterPanel :分配给选定项目组的项目列表
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 条记录的第一页。如果添加任何项目，那么它们将被添加到后端列表的列表中。由于我在第一页并且页面具有完整的行，因此插件无法找到表单中的任何更改。

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

Answer 1

既然您说您想要考虑添加或删除字段也是一种更改，以确保您的用户保存更改，那么一种方法可能是这样的:

您可以隐藏输入:

<h:inputHidden id="hiddenInput" />

在您的分配按钮oncomplete中，您提到您可以添加:

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

这会将“脏”字符串(例如)添加到隐藏输入并调用 change() 来告诉插件某些内容发生了更改，并且插件会将表单标记为脏(已更改) )。

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

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

此外，最好添加一些检查或在操作结束时执行此操作(link)。

注意:如果您添加和删除相同的“项目”，从技术上讲，没有任何更改，但您希望保持表单更改后的状态，对吧？该解决方案将适用于此。如果我错了并且您想处理这个特殊情况，请纠正我。您必须添加一些逻辑来比较新旧值并相应地清除或弄脏隐藏的输入。