带确认的Primefaces SelectBooleanCheckbox

Question

我想在primefaces中显示选中/取消选中复选框的确认对话框。我试过了

<p:selectBooleanCheckBox value="#{myBean.checkBoxValue}">
    <p:confirm message="Are you sure?"/>
</p:selectBoooleanCheckBox>

但它无法工作，因为selectBooleanCheckBox是不可确认的。有没有解决这个问题的方法？

Answer 1

一种方法是创建您自己的confirmDialog，例如

<p:confirmDialog widgetVar="myOwnConfirmDialog" message="Confirm ?">
    <p:commandButton value          =   "Yes"
                     action         =   "#{myBean.checkConfirmedAction}"
                     oncomplete     =   "PF('myOwnConfirmDialog').hide()"/>

    <p:commandButton value          =   "No" 
                     action         =   "#{myBean.checkCancelledAction}"
                     oncomplete     =   "PF('checkConfirmwdgt').toggle(); PF('myOwnConfirmDialog').hide()"/>
</p:confirmDialog>

然后使用onchange事件打开confirmDialog：

<p:selectBooleanCheckbox    value="#{myBean.checkBoxValue}" 
                            onchange="PF('myOwnConfirmDialog').show()" 
                            widgetVar="checkConfirmwdgt">
</p:selectBooleanCheckbox>

编辑：我在答案上犯了一个打字错误和错误。拼写错误实际上是在<p:selectBooleanCheckbox>中使用了<p:confirm> (你是对的，selectBooleanCheckbox是不可确认的)。错误在于<p:selectBooleanCheckbox>不会触发onclick，而只触发onblur、onchange和onfocus。使用onchange将会起作用。

Answer 2

我用一种不同的方式解决了这个问题--不想等到PrimeFaces实现接口。我显示了两个“commandButton”--只有一个依赖于状态。它们包含在一个表单中-或者您可以使用一个命名面板(在我的示例中为“selectProductUsageForm”)，该面板通过AJAX更新。第一个表示活动(切换)状态，第二个表示未切换状态。

解决方案是模仿显示行为-- Primefaces封装在CSS类"ui-state-active“(theme.css)中。我将CSS-class的内容复制到我自己的CSS-class "man-ui-state-active“中，并将其分配给第一个按钮。

 <h:form id="selectProductUsageForm" 
    rendered="#{productManager.mayEditSelected}">
   <span class="productGroupUsageBtnContainer">


    <p:commandButton 
        value="#{msg['product.inUseByGroup']} (#{login.currentUser.group.name})" styleClass="man-ui-state-active"
        icon="ui-icon-check"
        action="#{productManager.toggleCurrentProductGroupUsage}" 
        rendered="#{productManager.currentProductGroupUsage}" update="selectProductUsageForm">
            <p:confirm message="Are you sure?"/>
    </p:commandButton>
    <p:commandButton value="#{msg['product.notInUseByGroup']} (#{login.currentUser.group.name})" 
        icon="ui-icon-close"
        action="#{productManager.toggleCurrentProductGroupUsage}" 
        rendered="#{not productManager.currentProductGroupUsage}" update="selectProductUsageForm">
            <p:confirm message="Are you sure?"/>
    </p:commandButton>
    </span>
   </h:form>

CSS

.ui-button.man-ui-state-active {
    background-color: #e6e6e6;
    background-color: #d9d9d9 \9;
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

Answer 3

您想要显示通知(信息、警报...)更改复选框时。执行以下操作：

<p:selectBooleanCheckBox value="#{myBean.checkBoxValue}"
  onchange="if(!confirm('Your warning or information message here!!!')) 
   return false">
   <p:ajax listener="#{myBean.yourMethodHere()}" 
      update="theComponentYouWantToUpdate" />
</p:selectBoooleanCheckBox>