h : dataTable의 임의 임의 행에 맞춤 CSS 클래스를 할당하는 방법

Question

내 <h:dataTable>의 특정 행에 특정 CSS 클래스를 지정하려고합니다. 결과 테이블 행을 액세스하고 cutomize 할 수있는 방법이 있습니까?

Answer 1

rowClasses 속성을 원하는 CSS 문자열 문자열을 반환하는 bean 속성에 바인딩하십시오.

<h:dataTable value="#{bean.list}" rowClasses="#{bean.rowClasses}"> 

public String getRowClasses() { 
    StringBuilder rowClasses = new StringBuilder(); 
    for (Item item : list) { 
     if (rowClasses.length() > 0) rowClasses.append(","); 
     rowClasses.append(item.getRowClass()); 
    } 
    return rowClasses.toString(); 
} 

---

업데이트, 당신은 rowClasses 캐릭터를 완벽하게 프로그래밍 제어 할 수 있습니다이 방법을 명확히한다. 위의 내용은 단지 킥오프 예제 일 뿐이며 반드시 Item#getRowClass() 정도가 필요하지는 않습니다. 카운터를 사용하여 간단한 for 루프에서 수행 할 수도 있습니다.

예. selected가 List<Integer>입니다

public String getRowClasses() { 
    StringBuilder rowClasses = new StringBuilder(); 
    for (int i = 0; i < list.size(); i++) { 
     if (rowClasses.length() > 0) rowClasses.append(","); 
     rowClasses.append(selected.contains(i) ? "selected" : "none"); 
    } 
    return rowClasses.toString(); 
} 

. 은 1, 2, 5를 포함하면, 반환 된 문자열은 10 개 항목의 목록은 다음과 같이 표시됩니다

none,selected,selected,none,none,selected,none,none,none,none 

Answer 2

내가 @BalusC 제안을 좋아한다. 두 번째 대안을 원하면 javascript/JQuery를 사용하면 쉽게이 작업을 수행 할 수 있습니다. jQuery로

당신은

(Note, this is just an example. I haven't tested it, and there is probably a better way of doing it)

$(document).ready(function(){ 
    var counter = 0; 
    $('#myTable').each(function() { 
     counter = counter + 1; 
     if(counter==3) { 
     $(this).addClass('redRow'); 
     return; 
     } 

    }); 
}