如果在 primefaces 中禁用,复选框值将变为 false
Check box value is coming as false if it is disabled in primefaces
我有这样的需求
有一个带有复选框和保存、取消按钮的文件上传器。
如果文件无效并且选择应该保留,我必须禁用复选框。
禁用后,如果我单击保存按钮,复选框值在支持 bean 中变为 false,尽管它在对话框中显示为已选中。
调试时我发现 primeface 框架没有获取禁用复选框的 ID,
这是我的 xhtml 文件:
<h:form id="fileupload_form" enctype="multipart/form-data">
<h:panelGroup id="fileupload_Panel">
<p:message for="fileupload_Panel"></p:message>
<p:panelGrid styleClass="noBorderGrid global_docs" columns="4">
<h:outputText style="min-width:100px!important; margin-left: 42px;"></h:outputText>
<p:selectBooleanCheckbox id="tt" value="#{bean.selectedDocs}"/>
<h:outputText value="xx}"/>
<h:outputText style="min-width:100px!important; margin-left: 42px;" rendered="#{cc.attrs.bean != null and cc.attrs.bean.currentDocument != null}"></h:outputText>
<p:selectBooleanCheckbox id="checkBox" value="#{fileBean.tqpReport}" disabled="${not fileBean.isActive}"/>
<h:outputText value="xxxx"/>
<p:tooltip for="t" value="xxxx"/>
</p:panelGrid>
<p:fileUpload id="documentFileUploader" fileUploadListener="#{bean.uploadDocumentsListener}"
mode="advanced" dragDropSupport="true" multiple="true" auto="true" update="@form" process="@form"
onstart="PF('ajax').show();" onerror="PF('ajax').hide();"
style="width: 98%; max-width: 480px; max-height: 150px; overflow: auto;" styleClass="file-uploader-drag-drop" label="#{msgs.choose}" />
</h:panelGroup>
<p:panelGrid styleClass="noBorderGrid buttonTable" columns="3" style="float:right;">
<p:commandButton id="save" icon="ui-icon-disk" styleClass="blue_button" value="${msgs.save}" style="float:right;"
process="@form" update="@form" action="#{bean.save()}"/>
<p:commandButton id="cancel" icon="ui-icon-close" styleClass="blue_button" value="${msgs.cancel}"
action="#{bean.cancel()}" style="float:right;"
process="@this"/>
</p:panelGrid>
</h:form>
调试时我发现在
public void decode(FacesContext context, UIComponent component)
方法
SelectBooleanCheckboxRenderer.java class
禁用复选框的 ID 在该语句中为空。我不明白为什么?如果未禁用该复选框,我将获得正确的值。
String submittedValue = (String) context.getExternalContext().getRequestParameterMap().get(clientId + "_input");
禁用的元素不会post编辑为部分表单提交;您可以查看此 answer 了解更多详细信息。假设您使用的是 ViewScoped bean,您可以在值更改时使用 AJAX 将值 post 返回给 bean。
我尝试了隐藏变量技巧,它对我有用
xhtm 文件中的隐藏变量,支持 bean 中的 getter 和 setter。
<h:inputHidden id="checkBoxSelection" value="#{fileBean.checkBoxSelection}"/>
保存时,我正在获取选择,并设置为隐藏变量,如
<p:commandButton id="save" icon="ui-icon-disk" styleClass="blue_button" value="${msgs.save}" style="float:right;"
process="@form" update="@form" action="#{fileBean.saveUploadedDocuments(cc.attrs.id)}"
onclick="sendCheckBoxSelection('fileupload_form_widget_tqpReportCheckBox','fileupload_form:checkBoxSelection');"/>
而js函数是:
function sendCheckBoxSelection(checkBoxId,hiddenparamId){
var checkBoxSelection = false;
var tqpCheckBox = getWidgetVarById(checkBoxId);
if (tqpCheckBox != null){
checkBoxSelection = PrimeFaces.widgets[checkBoxId].input.is(':checked')
document.getElementById(hiddenparamId).value = checkBoxSelection;
}
}
function getWidgetVarById(id) {
for (var propertyName in PrimeFaces.widgets) {
if (propertyName === id) {
return PrimeFaces.widgets[propertyName];
}
}
}
因此,复选框值将在保存时设置为辅助 bean。
我有这样的需求
有一个带有复选框和保存、取消按钮的文件上传器。
如果文件无效并且选择应该保留,我必须禁用复选框。
禁用后,如果我单击保存按钮,复选框值在支持 bean 中变为 false,尽管它在对话框中显示为已选中。
调试时我发现 primeface 框架没有获取禁用复选框的 ID,
这是我的 xhtml 文件:
<h:form id="fileupload_form" enctype="multipart/form-data">
<h:panelGroup id="fileupload_Panel">
<p:message for="fileupload_Panel"></p:message>
<p:panelGrid styleClass="noBorderGrid global_docs" columns="4">
<h:outputText style="min-width:100px!important; margin-left: 42px;"></h:outputText>
<p:selectBooleanCheckbox id="tt" value="#{bean.selectedDocs}"/>
<h:outputText value="xx}"/>
<h:outputText style="min-width:100px!important; margin-left: 42px;" rendered="#{cc.attrs.bean != null and cc.attrs.bean.currentDocument != null}"></h:outputText>
<p:selectBooleanCheckbox id="checkBox" value="#{fileBean.tqpReport}" disabled="${not fileBean.isActive}"/>
<h:outputText value="xxxx"/>
<p:tooltip for="t" value="xxxx"/>
</p:panelGrid>
<p:fileUpload id="documentFileUploader" fileUploadListener="#{bean.uploadDocumentsListener}"
mode="advanced" dragDropSupport="true" multiple="true" auto="true" update="@form" process="@form"
onstart="PF('ajax').show();" onerror="PF('ajax').hide();"
style="width: 98%; max-width: 480px; max-height: 150px; overflow: auto;" styleClass="file-uploader-drag-drop" label="#{msgs.choose}" />
</h:panelGroup>
<p:panelGrid styleClass="noBorderGrid buttonTable" columns="3" style="float:right;">
<p:commandButton id="save" icon="ui-icon-disk" styleClass="blue_button" value="${msgs.save}" style="float:right;"
process="@form" update="@form" action="#{bean.save()}"/>
<p:commandButton id="cancel" icon="ui-icon-close" styleClass="blue_button" value="${msgs.cancel}"
action="#{bean.cancel()}" style="float:right;"
process="@this"/>
</p:panelGrid>
</h:form>
调试时我发现在
public void decode(FacesContext context, UIComponent component)
方法
SelectBooleanCheckboxRenderer.java class
禁用复选框的 ID 在该语句中为空。我不明白为什么?如果未禁用该复选框,我将获得正确的值。
String submittedValue = (String) context.getExternalContext().getRequestParameterMap().get(clientId + "_input");
禁用的元素不会post编辑为部分表单提交;您可以查看此 answer 了解更多详细信息。假设您使用的是 ViewScoped bean,您可以在值更改时使用 AJAX 将值 post 返回给 bean。
我尝试了隐藏变量技巧,它对我有用
xhtm 文件中的隐藏变量,支持 bean 中的 getter 和 setter。
<h:inputHidden id="checkBoxSelection" value="#{fileBean.checkBoxSelection}"/>
保存时,我正在获取选择,并设置为隐藏变量,如
<p:commandButton id="save" icon="ui-icon-disk" styleClass="blue_button" value="${msgs.save}" style="float:right;"
process="@form" update="@form" action="#{fileBean.saveUploadedDocuments(cc.attrs.id)}"
onclick="sendCheckBoxSelection('fileupload_form_widget_tqpReportCheckBox','fileupload_form:checkBoxSelection');"/>
而js函数是:
function sendCheckBoxSelection(checkBoxId,hiddenparamId){
var checkBoxSelection = false;
var tqpCheckBox = getWidgetVarById(checkBoxId);
if (tqpCheckBox != null){
checkBoxSelection = PrimeFaces.widgets[checkBoxId].input.is(':checked')
document.getElementById(hiddenparamId).value = checkBoxSelection;
}
}
function getWidgetVarById(id) {
for (var propertyName in PrimeFaces.widgets) {
if (propertyName === id) {
return PrimeFaces.widgets[propertyName];
}
}
}
因此,复选框值将在保存时设置为辅助 bean。