代码之家 › 专栏 › 技术社区 › ZheFrench

RichFaces 4:<rich:Jquery>数据表样式效果,如RF展示中的效果,不在范围视图中工作

richdatatable view-scope jsf-2 jquery

0

ZheFrench · 技术社区 · 11 年前

我正在尝试对我的jsf数据表进行样式化 here :

它在第一次加载页面时工作。但是,当我使用ajax调用对列进行排序时(如前面显示的链接所述),样式就会消失。如果我刷新一下,造型又回来了。

如果我把我的作用域放在请求作用域中。样式正在工作,但函数排序不再工作。我不太理解的事情。(对这种现象的解释感兴趣…)

因此,我理解jquery的担忧,但我找不到一种方法来说明:“嘿,当我对数据表值进行排序时,不要让样式消失。”

也许与重新渲染有关?

巴鲁斯,知道吗?:)

非常感谢各位,

祝您有个美好的一天。

<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')})"/>

1 回复 | 直到 11 年前

1

ZheFrench 11 年前

好的,我有更好的方法,添加attachtype=“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被设置为“订单表奇数行,订单表偶数行”,而我的css只命名为奇数行和偶数行。我迷失了方向。。。

更新:我将css更改为订单表偶数行、订单表奇数行。。。现在一切都正常。