jsf-2 - 在 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 中找不到全局参数。可能是新功能。所以我简单地从我的代码中删除了它。这里是修改后的确认对话框:

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

请尝试调整此确认对话框代码!可能是更新表单或隐藏()的不必要代码......

---

编辑:

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

服务器端:

ajax 事件是一样的。它调用调整简单字符串属性的 onRowEdit 监听器。例如 bean 包含:

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 中找到了这个:

When pencil icon is clicked, row is displayed in editable mode meaning input facets are displayed and output facets are hidden. Clicking tick icon only saves that particular row and cancel icon reverts the changes, both options are implemented with ajax interaction. Another option for incell editing is cell editing, in this mode a cell switches to edit mode when it is clicked, losing focus triggers an ajax event to save the change value.

所以 ajax 事件在行改变时起作用。这是您可以捕获的数据表事件:

我希望这个答案能帮助您找到解决方案!