在rowEditor更新模型之前显示confirmDialog

Question

我以非常默认的方式使用PrimeFaces dataTable和rowEditor：

<p:dataTable id="payments-table" var="apayment" value="#{payment.payments}" editable="true">
    <p:ajax event="rowEdit" listener="#{payment.update}"/>

    ...

</p:dataTable>

我想要一个确认对话框，在点击rowEditor的“检查”按钮时显示。

我知道可以使用JS确认功能（感谢Show a confirm message before <p:rowEditor> updates the model on click of "OK" button）：

<p:ajax event="rowEdit" listener="#{payment.update}" onstart="return confirm('Save changes?')"/>

但我希望对话框符合UI主题，confirmDialog组件是最佳候选者。唉，我不知道如何在这里使用它。我尝试了以下操作，但它不起作用（根本没有确认）：

<p:ajax event="rowEdit" listener="#{payment.update}">
    <p:confirm header="Remove payment" message="Remove payment?" icon="ui-icon-trash"/>
</p:ajax>
....
<p:confirmDialog global="true">
    <h:form id="form-payment-confirm">
        <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
    </h:form>
</p:confirmDialog>

有什么想法吗？

Answer 1

我认为你可以在这种情况下使用简单的widgetVar并调用show（）或hide（）函数。这是您修改后的代码：

<p:ajax event="rowEdit" listener="#{tableBean.onRowEdit}" oncomplete="myDialog.show()"/>

我使用PF 3.5并且在p：confirmDialog中找不到全局参数。可能是新功能。所以我简单地删除了我的代码。这里修改了confirmDialog：

<p:confirmDialog widgetVar="myDialog" closeOnEscape="true" appendToBody="true" closable="true">
                <h:form id="form-payment-confirm">
                    <p:commandButton value="Yes" type="button" update="@form" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
                    <p:commandButton value="No" type="button" onclick="myDialog.hide()" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
                </h:form>
            </p:confirmDialog>

请尝试调整此确认对话框代码！可能是更新表单或hide（）的不必要代码......

---

修改

如果要动态调整confirmDialog的文本消息，可以从服务器端进行调整。也许这不是最好的解决方案。我认为第二种方式是通过JQuery从客户端进行调整。

服务器端：

ajax事件是一样的。它调用onRowEdit监听器来调整简单的String属性。例如豆类包含：

String myDialogMessage = "Default message";
//getter and setter

 public void onRowEdit(RowEditEvent event) {
        myDialogMessage="Are you sure?";
    }

和对话框包含消息属性：

<p:confirmDialog widgetVar="myDialog" closeOnEscape="true" appendToBody="true" closable="true" message="{tableBean.myDialogMessage}"> 

客户端：

你可以使用JQuery的repleaceWith函数：

<script>
  jQuery("myDialog.p").replaceWith(....
</script>

当然需要为客户端开发更多业务逻辑，更多功能。也许服务器端解决方案更快。

请试一试！

---

根据您的评论，我已修改：

我在4.0 user' guide中找到了这个：

  

单击铅笔图标时，行以可编辑模式显示   显示输入构面并隐藏输出构面。点击   勾选图标仅保存该特定行，取消图标将恢复该特定行   更改，这两个选项都是使用ajax交互实现的。另一个   用于incell编辑的选项是单元格编辑，在此模式下是单元格   单击时切换到编辑模式，失去焦点会触发   用于保存更改值的ajax事件。

所以ajax事件在行更改时有效。这是您可以捕获的dataTable事件：

我希望这个答案有助于您找到解决方案！