使用戰斧dataList交替行顏色列表

我正在使用MyFaces 1.2和Tomahawk一些額外的組件。對於這個特定的頁面，我需要使用dataList（而不是dataTable），因爲我爲我的集合中的每個項目需要顯示多行（所以我無法使用dataTable）。我試過使用rowClasses，但不起作用（我認爲，因爲我自己生成的行）。我也嘗試綁定行到一個支持bean，但似乎只發生1倍，而不是每個項目。使用戰斧dataList交替行顏色列表

任何想法如何最好地實現這個使用JSF？

來源

2011-08-19 Sean

不幸的是，<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 pseudoselector。

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

但是，如果您的目標受衆使用的網頁瀏覽器不支持CSS3（IE8及以上），那麼你需要求助於的JavaScript/jQuery來文檔加載過程中添加CSS類。

來源

2011-08-19 13:42:51 BalusC

這需要支持ie7以及所以不能使用css3，jQuery應該工作。爲什麼我無法將datalist中的每一行綁定到後備bean？或者我需要一個對象爲每行？ – Sean

那麼，''不是一個選項，你不使用Facelets？在你之前的問題中，我看到你在談論XHTML文件，這固然意味着你在使用Facelets。否則，您可以使用''代替。 – BalusC

不，forEach導致items屬性出錯，無法繞過它。 – Sean

使用戰斧dataList交替行顏色列表

回答

相關問題