3

我以非常默认的方式使用 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 确认功能（感谢在 <p:rowEditor> 单击“确定”按钮更新模型之前显示确认消息）：

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

有任何想法吗？

4

1 回答 1

0

我认为您可以在这种情况下使用简单的 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 用户指南中找到了这个：

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

因此，当行更改时，ajax 事件起作用。这是您可以捕获的 dataTable 事件：

在此处输入图像描述

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

于 2013-12-14T21:35:49.627 回答