0

我正在尝试对我的 jsf 数据表进行样式设置，如下所示：

它在第一次加载页面时工作。但是，当我使用 ajax 调用对列进行排序时（如前面显示的链接中所述），样式消失了。如果我刷新，样式又回来了。

如果我把我的范围放在请求范围内。样式有效，但功能排序不再有效。我不太明白的事情。（有兴趣解释这种现象......）

所以我知道 jquery 很担心，但我找不到办法说：“嘿，当我对数据表值进行排序时，不要让样式消失”

也许与 reRender 有关？

BalusC，有什么想法吗？:)

非常感谢各位，

祝你今天过得愉快。

<h:form id="formSort" >

<a4j:outputPanel id="ajaxOutputPanel" layout="block" ajaxRendered="true">

        <rich:dataTable  id="customList"  style="width:70%;margin-left:auto;margin-right:auto;" var="c" value="#{participant.listParticipant}"   rendered="#{not empty participant.listParticipant}"
                styleClass="stable"
                rowClasses="order-table-odd-row,order-table-even-row">

            <f:facet name="header"><h:outputText value="PARTICIPANTS" /></f:facet>

            <rich:column>
               <f:facet name="header">  <h:outputText value="ID DE L'ETUDE" /></f:facet>
                <h:outputText value="#{c.id_study}" />
            </rich:column>

            <rich:column  sortBy="#{c.enrollment_date}" id="enrollment_date" comparator="#{participant.dateComparator}"  sortOrder="#{participant.dateOrder}">
                <f:facet name="header" >
                    <a4j:commandLink value="DATE D'INCLUSION" render="customList" action="#{participant.sortByDates}" />
                </f:facet>
                <h:outputText value="#{c.enrollment_date}" />
            </rich:column>

        </rich:dataTable>


        </rich:panel>

</a4j:outputPanel>

</h:form>

<rich:jQuery selector="#customList tr:odd" query="addClass('odd-row')"  />
<rich:jQuery selector="#customList tr:even" query="addClass('even-row')" />
<rich:jQuery selector="#customList tr"  query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
<rich:jQuery selector="#customList tr"  query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
4

1 回答 1

1

好的，我有更好的方法来添加 attach-type="live" 和事件类型：

<rich:jQuery selector="#customList tr:odd"  query="addClass('odd-row')"  />
<rich:jQuery selector="#customList tr:even" query="addClass('even-row')" />

<rich:jQuery selector="#customList tr"  event ="mouseover" query="jQuery(this).addClass('active-row')" attachType="live"/>
<rich:jQuery selector="#customList tr"  event ="mouseout" query="jQuery(this).removeClass('active-row')" attachType="live"/>

我的效果适用于鼠标悬停和鼠标移出。但是斑马风格仍然行不通。而且我不能影响两个第一个丰富的事件：查询标签...我不知道这里...有人，谢谢？继续寻找解决方案......

CSS样式是：

 .even-row {background-color: #FCFFFE;}

 .odd-row {background-color: #ECF3FE;}

 .active-row {background-color: #FFEBDA !important;cursor: pointer;}

另一个问题，为什么在rich:datatable 中，rowClasses 设置为“order-table-odd-row,order-table-even-row”，而我的 css 只命名为奇数行和偶数行。我迷路了……

更新：我将 css 更改为 order-table-even-row,order-table-odd-row ... 现在一切正常。

于 2013-09-20T11:06:26.613 回答