如果在素面数据表中添加新行，如何检测形式的变化 [英] How to detect change in form if added a new row in prime faces datatable

问题描述

我要求在页面加载时禁用页面中的保存和取消按钮.如果用户在页面中进行了某些更改，则应启用保存"和取消"按钮.为此，我正在使用
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上的插件中定义的rescan方法，以检测更改并跟踪添加的新记录，因为我想考虑添加或删除字段也是更改.

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

如何在这种情况下找到更改.

解决方案

由于您说过要考虑对字段的任何添加或删除，因此还要进行更改以确保用户保存更改，因此一种解决方法是像这样:

您可以隐藏输入:

<h:inputHidden id="hiddenInput" />

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

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

这会将'dirty'字符串(例如)添加到隐藏的输入中，并调用change()告诉插件某些更改，并且插件会将表单标记为脏(更改).

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

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

此外，最好添加一些检查或在操作结束时进行检查(链接).

注意::如果您添加和删除相同的项目"，从技术上讲，没有任何变化，但是您想让表单保持不变吗?该解决方案将为此而工作.如果我错了，请纠正我，您想处理这个特殊情况.您必须添加一些逻辑，在其中比较旧值和新值，并相应地清除或弄脏隐藏的输入.

I have requirements to disable save and cancel buttons in my page on page load. I should enable save and cancel buttons if user changes something in the page. To achieve this, I am using
http://plugins.jquery.com/are-you-sure/

This plugin is working fine but there is need for customization in many scenarios, one like below

I have a page like Item groups which consists of three panels.

LeftPanel : List of item groups in the system
CenterPanel : List of items assigned to a selected item group
RightPanel : List of items to assign to an item group

Now Assume I have a datatable

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

To assign items to the item group I would select items in the right panel and click on assign button which would add to the listOfItems to show in the center panel

 listOfItems.addAll(selectedItems);  

I am calling rescan method defined in the plugin on assign button oncomplete to detect the changes and track new records added because I want to consider addition or removal of fields also a change.

Now on page load if an item group is selected and it has 13 items assigned then I could see the first page with 10 records. If any items added then they will be added in the list at back end list. Since I'm in first page and page is having complete rows plugin is unable to find any changes in form.

How to find a change in this scenario.

解决方案

Since you say you want to consider any addition or removal of fields also a change to make sure that your users save the changes, one way to do it could be like this:

You can have a hidden input:

<h:inputHidden id="hiddenInput" />

And in your assign button oncomplete you mentioned you can add:

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

This would add the 'dirty' string (for example) to the hidden input and call change() to tell the plugin that something changed, and the plugin would mark the form as dirty (changed).

And in the oncomplete of your saving button, all you have to do is clear that value and reinitialize the plugin to start again:

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

Also it would be good to add some checking or to do that at the end of the action (link).

NOTE: If you add and delete the same 'item', technically there aren't changes, but you want to keep the form as changed right? This solution will work for that. Correct me if I'm wrong and you want to manage this particular case. You would have to add some logic in which you compare old and new values and clear or dirty the hidden input accordingly.

这篇关于如果在素面数据表中添加新行，如何检测形式的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！