h:dataTable 提交后丢失所选行的 styleClass

Question

在我的数据表中，当单击一行时，它会被标记为某种颜色。但随后这个标记就消失了，因为发生了提交。但我只重新渲染页面的其他部分而不是表格，那么为什么会发生这种情况呢？我该如何解决这个问题？ 代码：

<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 和“firebug”插件实时检查元素以了解发生了什么情况。可能是您的更新中的某些内容破坏了样式的继承......