JSF重置按钮没有重置几个列

Question

我在JSF页面中有以下内容，当我按重置按钮时，除employeenumber(empnumber)和phone(phoneno)外，所有值都被重置，甚至autoComplete(empname)也被重置。这可能是什么原因呢?

    <p:panelGrid   columns="6"> 
    <h:outputLabel value="Employee Name"  />
    <p:autoComplete value="#{myMB.employee}"  id="empname"      
    completeMethod="#{myMB.complete}" converter="myConverter"
    var="p" itemLabel="#{p.employeeName}" itemValue="#{p}"               
    forceSelection="true" >                           
    <p:ajax event="itemSelect" listener="#{myMB.handleSelect}" 
    update ="empnumber phoneno" /> 
    <p:column>#{p.employeeName} - #{p.employeeNumber}</p:column>
    </p:autoComplete>   
   <p:message id="badgeMessage" for="empname" />                      
   <h:outputLabel  value="Employee Number"  />
   <p:inputText id="empnumber" value="#{myMB.employeeDetail.employeeNumber}" >
   </p:inputText>
   <p:message id="empnumMessage" for="empnumber" />
   <h:outputLabel value="Phone #" for="phoneno" />
   <p:inputText id="phoneno" value="#{myMB.employeeDetail.phoneNo}">
   </p:inputText>
   <p:message id="phoneMessage" for="phoneno" />
   </p:panelGrid>
   <p:separator />
  <p:panelGrid >
  <h:outputLabel value="Department" for="department" /> 
  <h:selectOneMenu id="department" value="#{myMB.department}"
  converter="departmentConverter"> 
  <f:selectItems value="#{myMB.departmentItems}" var="dept"
  itemLabel="#{dept.departmentName}" itemValue="#{dept.departmentCode}"/>
  <p:ajax listener="#{myMB.loadDepartments}" />
  </h:selectOneMenu>
 <p:message id="categoryMessage" for=  "department" />

 <p:commandButton type="reset" value="Cancel" icon="ui-icon-close"                     
 onclick="myDialog.hide()" />  

Answer 1

如果您实际使用Primefaces，则使用其组件<p:resetInput>是有意义的，该组件专门设计用于在验证失败时处理数据重置。从官方文档中可以看到:

当验证失败时，输入组件将其本地值保持在状态。ResetInput用于从状态中清除缓存的值，以便组件从备份bean模型中检索它们的值。

组件的工作方式如下:在验证失败的情况下，当附加标签时，在<p:resetInput>的target属性中指定id的组件的值将被重新填充为初始值。<p:resetInput>可以附加到动作源组件，如<p:commandButton>。

为了简化它的使用，您可以选择将所有要重置的组件分组在一个容器中，如<p:panel id="panel">，从展示示例中可以看到。

在这种情况下，你的视图可以重构为:

<h:form>
    <p:panel id="panel">
        <p:panelGrid   columns="6"> 
            <h:outputLabel value="Employee Name"  />
            <p:autoComplete value="#{myMB.employee}"  id="empname"      
                            completeMethod="#{myMB.complete}" converter="myConverter"
                            var="p" itemLabel="#{p.employeeName}" itemValue="#{p}"               
                            forceSelection="true" >                           
                <p:ajax event="itemSelect" listener="#{myMB.handleSelect}" 
                        update ="empnumber phoneno" /> 
                <p:column>#{p.employeeName} - #{p.employeeNumber}</p:column>
            </p:autoComplete>   
            <p:message id="badgeMessage" for="empname" />                      
            <h:outputLabel  value="Employee Number"  />
            <p:inputText id="empnumber" value="#{myMB.employeeDetail.employeeNumber}" >
            </p:inputText>
            <p:message id="empnumMessage" for="empnumber" />
            <h:outputLabel value="Phone #" for="phoneno" />
            <p:inputText id="phoneno" value="#{myMB.employeeDetail.phoneNo}">
            </p:inputText>
            <p:message id="phoneMessage" for="phoneno" />
        </p:panelGrid>
        <p:separator />
        <h:outputLabel value="Department" for="department" /> 
        <h:selectOneMenu id="department" value="#{myMB.department}"
                         converter="departmentConverter"> 
            <f:selectItems value="#{myMB.departmentItems}" var="dept"
                           itemLabel="#{dept.departmentName}" itemValue="#{dept.departmentCode}"/>
            <p:ajax listener="#{myMB.loadDepartments}" />
        </h:selectOneMenu>
        <p:message id="categoryMessage" for=  "department" />
    </p:panel>
    <p:commandButton value="Reset input values" update="panel" process="@this" onclick="myDialog.hide()" icon="ui-icon-close">
        <p:resetInput target="panel"/>
    </p:commandButton>
</h:form>