如何在RichFaces中根据实体信息为dataTable表格整行设置背景色

RichFaces的<rich:dataTable>组件自带rowStyle（行内样式）和rowStyleClass（CSS类）属性，支持通过EL表达式动态绑定每行的样式，直接通过你实体里的color属性即可实现整行背景色控制，无需单独给每个单元格内的元素设样式。

方法1：直接使用行内样式（快速实现） #

直接在rich:dataTable标签上添加rowStyle属性，根据stat.color的值动态生成背景色样式，同时删除原有每个h:outputLabel上的background-color设置，避免覆盖行背景：

<rich:panel styleClass="container dynamic grey table col7">
    <f:facet name="header">#{msg.toop_normalverteilungstest_results}</f:facet>

    <!-- 新增rowStyle属性实现整行背景色控制 -->
    <rich:dataTable styleClass="dynamic equicol7"
        value="#{normalverteilungstestBean.statisticResultsList}" var="stat" id="table"
        rowStyle="#{stat.color == 'g' ? 'background-color:MediumSeaGreen;' : stat.color == 'r' ? 'background-color:Tomato;' : ''}">

        <rich:column id="testschritteVal" styleClass="col1-table" headerClass="col1-table">
            <f:facet name="header">
                <h:outputText value="#{msg.masterdata_normalverteilungstest_testschritte}" />
            </f:facet>
            <!-- 去掉了outputLabel上的背景色设置 -->
            <h:outputLabel value="#{stat.testschritte}" styleClass="col1" />
        </rich:column>
        <!-- 其余列保持原有逻辑即可，无需额外修改 -->
    </rich:dataTable>
</rich:panel>

方法2：使用CSS类（更易维护） #

推荐优先用这种方式，把样式定义抽离到CSS文件中，后续调整颜色无需修改xhtml代码：

1. 先在你的CSS样式文件中添加对应类：

/* 行背景色样式 */
.row-status-green {
    background-color: MediumSeaGreen;
}
.row-status-red {
    background-color: Tomato;
}

2. 替换rowStyle为rowStyleClass属性：

<rich:dataTable styleClass="dynamic equicol7"
    value="#{normalverteilungstestBean.statisticResultsList}" var="stat" id="table"
    rowStyleClass="#{stat.color == 'g' ? 'row-status-green' : stat.color == 'r' ? 'row-status-red' : ''}">
    <!-- 表格内部内容和方法1一致 -->
</rich:dataTable>

注意事项 #

如果原有列/单元格设置了独立的背景色，会优先覆盖行级的背景色，需要把对应位置的背景色设置删除即可生效。

内容的提问来源于stack exchange，提问作者Robert Popa