JSF <p:dataTable> 隔行换色功能的实现

<p:dataTable>弄了几个小时的隔行换色的功能，终于在无意当中找到一个好的方法。

步骤如下：

第一步，编写自己的样式表，如下：

<style>
.tr_color1{
    background-color: #FFFFFF;
}
.tr_color2{
    background-color: #F8F8F8;
}
</style>

 第二步，在<p:dataTable>中应用，以达到分行显示的效果，如下：

<p:dataTable rowIndexVar="index" rowStyleClass="#{index mod 2 == 0 ? 'tr_color1':'tr_color2'}">
    ...
    中间略
    ...
</p:dataTable>

 解释：在<p:dataTable>中通过属性"rowIndexVar"来取得每行的行号，然后通过行号对2求余来计算奇偶行，从而达到隔行显示不同颜色的效果。

 

 

============================= 分隔线 =========================

后来发现另外一种更为简便的方法：

只需要添加下列样式即可，无需其它改动

<style>
    .ui-datatable, .ui-datatable-even {
            background: #f8f8f8;
     }
</style>