如果在primefaces数据表中添加新行,如何检测表单中的更改

时间:2014-09-21 13:25:37

标签: javascript jquery jsf primefaces

我要求在页面加载时禁用页面中的保存和取消按钮。如果用户更改了页面中的内容,我应该启用保存和取消按钮。为实现这一目标,我正在使用
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以显示在中心面板中

 listOfItems.addAll(selectedItems);  

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

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

如何在此方案中找到更改。

1 个答案:

答案 0 :(得分:0)

由于您说要考虑添加或删除字段也需要进行更改以确保用户保存更改,因此一种方法可能是这样:

您可以拥有隐藏的输入:

<h:inputHidden id="hiddenInput" />

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

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

这会增加“肮脏的”&#39;字符串(例如)到隐藏的输入并调用change()告诉插件某些内容发生了变化,插件会将表单标记为脏(更改)。

保存按钮的oncomplete中,您只需清除该值并重新初始化该插件即可重新启动:

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

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

注意:如果您添加和删除相同的&#39;项目,从技术上讲,没有任何更改,但您希望保持表单更改正确吗?该解决方案将适用于此。如果我错了并且你想管理这个特殊情况,请纠正我。您必须添加一些逻辑,在其中比较旧值和新值,并相应地清除或弄脏隐藏的输入。