tomahawk dataList를 사용하는 행 색상 교체

Question

일부 추가 구성 요소의 경우 Tomahawk과 함께 MyFaces 1.2를 사용하고 있습니다. 이 특정 페이지에서는 필자의 컬렉션에있는 모든 항목에 대해 여러 행을 표시해야하므로 dataTable 대신 dataList를 사용해야했습니다 (따라서 dataTable을 사용할 수 없기 때문에).

나는 rowClasses를 사용하여 시도했으나 작동하지 않습니다. 왜냐하면 내가 직접 행을 생성하기 때문입니다. 또한 행을 뒷받침 빈에 바인딩하려고 시도했지만 각 항목이 아닌 1x 만 발생하는 것으로 보입니다.

JSF를 사용하여 가장 잘 구현하는 방법은 무엇입니까?

Answer 1

불행히도 <t:dataList>에는 및 <ui:repeat>과 비슷한 개념이 없으므로 varStatus입니다. <c:forEach>는 기술적 한계로 당신을위한 옵션이없는 경우는 시간을 렌더링하지, 뷰 빌드 시간 태그의로

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

와

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

: 당신은 그렇지 않으면 이런 일을 할 수있을 것 태그 대신 Facelets를 사용하는 경우 items 대신 value 속성을 사용해야하는 유일한 차이점과 비슷한 구문으로 <ui:repeat>을 사용할 수 있어야합니다.

<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의를 사용하지 않는 경우 다음 가장 좋은 방법은 CSS3를 nth-child pseudoselector을 사용하고, (심지어 이전 질문 비록 당신이 Facelets의를 사용하고 있음을 시사한다).

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

그러나 귀하의 타겟 고객이 사용하는 웹 브라우저는 다음 문서를로드하는 동안 CSS 클래스를 추가하는 자바 스크립트/jQuery를에 의지 할 필요가 CSS3 (IE8 이상)를 지원하지 않는 경우.