学步园

组件<h:dataTable>中提供了rowClasses和columnClasses等。

          rowClasses 用来控制行的显示,，如果你在rowClasses中加入两个样式类，并使用逗号分开，那么渲染的每一行会交替使用这两个样式类进行显示，同理多个样式类也会循环交替显示。

          columnClasses用来控制每列的显示，用法同rowClasses。

<h:dataTable value="#{userSubsysFroCentHistoryAction.froCentList}" 

                            var="oneCentList" 

                            styleClass="mxl" 

                            rowClasses="list-row1-background ,list-row2-background" 

                           columnClasses="list-column1-center,list-column2-center,list-column3-center,

                                                            list-column4-center,list-column5-center,list-column6-center">
     <h:column>
      <f:facet name="header">
       <h:outputText value="时间" />
      </f:facet>
       <h:outputText value="#{oneCentList[0]}" />
     </h:column>
     <h:column>
       <f:facet name="header">
        <h:outputText value="平台"/>
       </f:facet>
       <h:outputText value="#{oneCentList[1]}"/>
     </h:column>
     <h:column>
      <f:facet name="header">
       <h:outputText value="得分"/>
      </f:facet>
      <h:outputText value="#{oneCentList[2]}" rendered="#{oneCentList[2]>=0}"/>
     </h:column>
     <h:column>
       <f:facet name="header">
        <h:outputText value="扣分"/>
       </f:facet>
       <h:outputText value="#{oneCentList[2]}" rendered="#{oneCentList[2]<0}"/>
     </h:column>
     <h:column>
      <f:facet name="header">
       <h:outputText value="剩余积分"/>
      </f:facet>
      <h:outputText value="#{oneCentList[3]}" />
     </h:column>
     <h:column>
      <f:facet name="header">
       <h:outputText value="备注"/>
      </f:facet>
      <h:outputText value="#{oneCentList[4]}" />
     </h:column>
 </h:dataTable> 

 其中Stype.css 中的样式定义如下：

    .mxl{width:674px;margin:0 auto;text-align:center;}   // 定义表格整体样式：宽度

   //  以下定义每列的样式

.list-column1-center {
  text-align: center;
  width: 21%;
}
.list-column2-center {
  text-align: center;
  width: 13%;
}
.list-column3-center {
  text-align: center;
  width: 12%;
}
.list-column4-center {
  text-align: center;
  width: 12%;
}
.list-column5-center {
  text-align: center;
  width: 12%;
}
.list-column6-center {
  text-align: center;
  width: 30%;
}

//  以下定义每行的样式
.list-row1-background{
  background:#FFFFFF;
}
.list-row2-background{
  background:#F1F1F1;
}

结果如图：

转 ：jsf 的<t:dataTable>组件自定义控制指定行样式的方法 

          http://blog.csdn.net/icess_ma/archive/2007/10/24/1840957.aspx