h：dataTable在提交后丢失选定的行styleClass

Question

在我的dataTable中，当单击一行时，它会被标记为某种颜色。但是这个标记因为提交而消失。但我只重新渲染页面的其他部分而不是表格，那么为什么会发生？我怎样才能解决这个问题？ 代码：

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich" 
    xmlns:p="http://primefaces.prime.com.tr/ui" 
    template="/templates/mainLayout.xhtml"> 

<ui:define name="header"> 
    <h1>Persons List</h1> 
</ui:define> 

<ui:define name="content"> 
    <h:form id="mainForm"> 
     <h:outputStylesheet name="tableStyle.css" library="css" target="body"/> 

     <h:panelGroup id="personPanel"> 
      <h:outputText value="#{msgs.fName}"/> 
      <h:inputText value="#{personController.person.firstName}" maxlength="20"/> 

      <h:outputText value="#{msgs.lName}"/> 
      <h:inputText value="#{personController.person.lastName}" maxlength="20"/> 

      <h:outputText value="#{msgs.phone}"/> 
      <h:inputText value="#{personController.person.phone}" maxlength="20"/> 
     </h:panelGroup> 

     <h:commandButton value="#{msgs.save}" > 
      <f:ajax execute="@form" render="personsTable personPanel" listener="#{personController.savePerson}"/> 
     </h:commandButton> 
     <h:dataTable id="personsTable" value="#{personController.persons}" var="bean" 
      styleClass="order-table" headerClass="order-table-header" rowClasses="order-table-odd-row,order-table-even-row" rules="none" > 
      <h:column> 
       <f:facet name="header"> 
        <h:outputText value="First Name" /> 
       </f:facet> 
       <h:commandLink value="#{bean.firstName}" > 
        <f:ajax execute="@this" render="personPanel" > 
         <f:setPropertyActionListener target="#{personController.person}" value="#{bean}" /> 
        </f:ajax> 
       </h:commandLink> 
      </h:column> 
      <h:column> 
       <f:facet name="header"> 
        <h:outputText value="Last Name" /> 
       </f:facet> 
       <h:commandLink value="#{bean.lastName}" > 
        <f:ajax execute="@this" render="personPanel"> 
         <f:setPropertyActionListener target="#{personController.person}" value="#{bean}" /> 
        </f:ajax> 
       </h:commandLink> 
      </h:column> 
      <h:column> 
       <f:facet name="header"> 
        <h:outputText value="Phone" /> 
       </f:facet> 
       <h:commandLink value="#{bean.phone}" > 
        <!-- f:ajax execute="@this" render="personPanel"> 
         <f:setPropertyActionListener target="#{personController.person}" value="#{bean}" /> 
        </f:ajax--> 
       </h:commandLink> 
      </h:column> 
     </h:dataTable> 
    </h:form> 
</ui:define> 

<ui:define name="footer"> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $(".order-table tr").mouseover(function(){ 
       $(this).addClass("over"); 
      }); 
      $(".order-table tr").mouseout(function(){ 
       $(this).removeClass("over"); 
      }); 
      $(".order-table tr").click(function(){ 
       $(".order-table tr").removeClass("choose"); 
       $(this).addClass("choose"); 
      }); 
     }); 
    </script> 
</ui:define> 
</ui:composition> 

Answer 1

您可以使用Firefox和“萤火虫”插件检查实时元素，找出发生了什么事情。这可能是因为你的更新是打破了风格的继承......