Я пытаюсь сделать стиль для своей таблицы данных 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')})"/>  
0
ZheFrench 20 Сен 2013 в 13:27

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

Мой эффект работает при наведении указателя мыши и на выводе указателя мыши. Но стиль зебры до сих пор не работает. И я не могу повлиять на событие в двух первых тегах 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 называется только odd-row и even-row. Я потерялся в этом ...

Обновление: я меняю css на таблицу заказов-четная-строка, таблица-нечетная-строка-порядок ... и теперь все работает правильно.

1
ZheFrench 20 Сен 2013 в 15:26