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

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

---

编辑：

如果要动态调整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 找到这个：

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

所以当行改变时 ajax 事件起作用。这是您可以捕获的 dataTable 事件：

我希望这个答案能帮助你找到解决方案！