【问题标题】:Show confirmation dialog before deleting a p:dataTable entry在删除 p:dataTable 条目之前显示确认对话框
【发布时间】:2020-12-12 23:17:43
【问题描述】:

我目前正在实现一个在素数面孔中具有删除功能的数据表。在删除之前,用户在对话框中确认他的决定:如果它是“是”,那么应该删除“当前”行(也就是用户单击删除按钮所在的行)。目前,无论触发了哪个行删除操作,最后一行都会被删除:

<p:dataTable var="var" value="#{bean.list}">

//some columns

//relevant column
 <p:column id="id">

  <p:commandButton id="deleteButton" onclick="PF('deleteDialog').show();" />
                            
  <p:confirmDialog id="deleteDialogId" widgetVar="deleteDialog" appendTo="@form">
    <p:commandButton id="confirm" onclick="PF('deleteDialog').hide();" 
      actionListener="#{bean.deleteRowAction(var)}" />
    <p:commandButton id="cancel" onclick="PF('deleteDialog').hide();" />
   </p:confirmDialog>
 </p:column>

</p:dataTable>

confirm 按钮的 actionListener 似乎无法通过仅获取 var 作为输入来访问当前行。如果我摆脱对话框并在deleteButton 上触发动作监听器,一切都会按预期工作:

// works, but no dialog
<p:dataTable var="var" value="#{bean.list}">

//some columns

//relevant column
 <p:column id="id">

  <p:commandButton id="deleteButton" actionListener="#{bean.deleteRowAction(var)}" />

 </p:column>

</p:dataTable>

我找到了How can I pass selected row to commandLink inside dataTable or ui:repeat?JSF Delete entity on DataTable with p:dialog,但不幸的是它没有帮助。

有没有办法以某种方式将“当前”表条目传递到外部按钮上?

【问题讨论】:

    标签: primefaces


    【解决方案1】:

    使用p:confirmDialog 有一种更简单的方法。这使您只需将p:confirm 添加到您的p:commandButton 即可完成:

    <h:form>     
        <p:dataTable var="var" value="#{bean.list}">
            <p:column id="id">
                 <p:commandButton id="deleteButton"
                                  action="#{bean.deleteRowAction(var)}">
                     <p:confirm header="Confirmation"
                                message="Are you sure?"
                                icon="pi pi-exclamation-triangle" />
                </p:commandButton>
            </p:column>
        </p:dataTable>
         
        <p:confirmDialog global="true">
            <p:commandButton value="Yes" type="button"
                             styleClass="ui-confirmdialog-yes" icon="pi pi-check" />
            <p:commandButton value="No" type="button"
                             styleClass="ui-confirmdialog-no" icon="pi pi-times" />
        </p:confirmDialog>      
    </h:form>
    

    【讨论】:

    【解决方案2】:

    我只是在列内使用确认:

    <p:dataTable var="item" ...
        <p:column headerText="Item">
            <p:commandButton action="#{myBean.deleteItem(item)}">
                <p:confirm header="Confirmation" message="Delete item?" icon="ui-icon-alert"/>
            </p:commandButton>
        </p:column> 
    

    【讨论】:

    • 是的,这也对我有用。我不只使用&lt;p:confirm&gt; 的原因是我无法真正微调显示的对话框。否则我觉得它是最好的选择
    • 您确实可以添加自己的文本。例如:&lt;p:confirm header="Confirmation" message="#{myBean.getMessage}" icon="ui-icon-alert" escape="false"/&gt;,其中的消息可以带有 HTML 标签,如 '
    • 我知道这一点。我还需要通过在按钮上添加小图标来自定义是和否按钮。但是感谢您指出headermessage
    • 最后一件事:如果您真的想要一个完美定制的确认,只需打开一个对话框并让它完成所有工作。 action="#{myBean.whatever(item)}" update=":myConfirm" oncomplete="PF('myConfirm').show()"
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-07-21
    • 2016-02-06
    • 2021-08-02
    • 2018-10-10
    • 2017-08-22
    • 1970-01-01
    • 2014-02-16
    相关资源
    最近更新 更多