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" と event type を追加する方が良いでしょう:

<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"/>

私の効果は、マウスオーバーとマウスアウトで機能しています。しかし、ゼブラ スタイルはまだ機能していません。そして、最初の 2 つの rich:query タグのイベントに影響を与えることはできません... ここでは何もわかりません... 誰か、ありがとう? 解決策を探し続けてください....

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 に答える