Question

我想在primefaces中的select / unselect复选框上显示确认对话框。我试过

<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:confirm>内使用<p:selectBooleanCheckbox>（你是对的，selectBooleanCheckbox不可确认。）错误是<p:selectBooleanCheckbox>不会触发onclick，而只会onblur，onchange和onfocus。使用onchange会有效。

Answer 2

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

解决方案是模仿显示行为 - Primefaces封装在CSS类“ui-state-active”（theme.css）中。我将CSS类的内容复制到我自己的CSS类“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);
}

Primefaces SelectBooleanCheckbox确认

2 个答案: