Цвет чередующейся строки с помощью томагавка dataList

Question

Я использую MyFaces 1.2 вместе с Tomahawk для некоторых дополнительных компонентов.Для этой конкретной страницы мне нужно было использовать dataList (вместо dataTable), потому что мне для каждого элемента в моей коллекции нужно отображать несколько строк (поэтому я не могу использовать dataTable).

я пытался использоватьrowClasses, но это не работает (я думаю, потому что я сам генерирую строки).Я также пытался связать строки с компонентом поддержки, но это, кажется, происходит только 1x, а не для каждого элемента.

Есть идеи, как лучше всего реализовать это с помощью JSF?

Answer 1

К сожалению, <t:dataList> не имеет понятия varStatus, аналогичного <c:forEach> и <ui:repeat>.В противном случае вы могли бы сделать что-то вроде этого:

<table id="mytable">
    <c:forEach items="#{bean.items}" var="item" varStatus="loop">
        <tr>
            <td class="#{loop.index % 2 == 0 ? 'even' : 'odd'}">
                <h:outputText value="#{item}" />
            </td>
        </tr>
    </c:forEach>
</table>

с

#mytable tr.odd { background-color: #ddd; }
#mytable tr.even { background-color: #eee; }

Если <c:forEach> не подходит для вас из-за технических ограничений, так как это время сборки представлениятег, а не тег времени рендеринга, и вы используете Facelets вместо JSP, тогда вы сможете использовать <ui:repeat>, следуя аналогичному синтаксису, с той лишь разницей, что вам нужно использовать атрибут value вместо items.

<table id="mytable">
    <ui:repeat value="#{bean.items}" var="item" varStatus="loop">
        <tr>
            <td class="#{loop.index % 2 == 0 ? 'even' : 'odd'}">
                <h:outputText value="#{item}" />
            </td>
        </tr>
    </ui:repeat>
</table>

Но если вы не используете Facelets (хотя ваши предыдущие вопросы предполагают, что вы используете Facelets), то лучше всего использовать псевдоселектор CSS3 nth-child.

#mytable tr:nth-child(odd) { background-color: #ddd; }
#mytable tr:nth-child(even) { background-color: #eee; }

Но если веб-браузер, используемый вашей целевой аудиторией, не поддерживает CSS3 (IE8 и старше), вам нужно прибегнуть к JavaScript / jQuery, чтобы добавить класс CSS во время загрузки документа.