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

In my dataTable when a row is clicked it gets marked with some color. But then this mark disappears because submit occurs. But i re-render only some other part of the page and not the table, so why does it occur? How can i fix this? The code:

在我的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>

1 个解决方案

#1

You can use firefox and "firebug" plugin to inspect the element in real time to find out what's going on. It could be that something about your update is breaking the inheritance of the style...

你可以使用firefox和“firebug”插件实时检查元素，找出发生了什么。关于你的更新可能会破坏样式的继承......