如何使用 JSF 和 CSS 获取表格行的渐变背景？答案

【问题标题】：How to get a gradient background for table rows with JSF and CSS?如何使用 JSF 和 CSS 获取表格行的渐变背景？
【发布时间】：2015-02-13 11:40:06
【问题描述】：

我可以在行上创建渐变背景（见屏幕截图），但这被硬编码为 10 行。超过 10 行时重复渐变。

我能否创建具有动态行数（5 行、10 行、21 行……取决于数据源）的渐变（从白色到黑色）

这将是一个很好的 JSF 考试问题，但我想不通...

数据表

<h:outputStylesheet library="default" name="css/style.css" />
<h:dataTable id="persons" value="#{tableBean.persons}" var="person"
             rowClasses="list-row-1, list-row-2, list-row-3, list-row-4, list-row-5, list-row-6, list-row-7, list-row-8, list-row-9, list-row-10">
    <h:column><h:outputLabel value="#{person.firstName}" /></h:column>
    <h:column><h:outputLabel value="#{person.lastName}" /></h:column>
    <h:column><h:outputLabel value="#{person.jobTitle}" /></h:column>
    <h:column><h:outputLabel value="#{person.birthDate}" /></h:column>
    <h:column><h:outputLabel value="#{person.age}" /></h:column>
</h:dataTable>

StyleCheet：默认/1_0/css/style.css

.list-row-1 {
    background-color: #FFF;
}
.list-row-2 {
    background-color: #EEE;
}
.list-row-3 {
    background-color: #DDD;
}
.list-row-4 {
    background-color: #CCC;
}
.list-row-5 {
    background-color: #BBB;
}
.list-row-6 {
    background-color: #AAA;
}
.list-row-7 {
    background-color: #999;
}
.list-row-8 {
    background-color: #888;
}
.list-row-9 {
    background-color: #777;
}
.list-row-10 {
    background-color: #666;
}

这可以用 Bean 完成吗？ 应该计算梯度并适合总行数：white=first row;黑色是最后一行。

【问题讨论】：

只需使用 rowClasses="#{bean.calculatedRowClasses}" 左右和适当的 bean 逻辑？还是把它作为整个表格本身的背景？

标签： css jsf background gradient

【解决方案1】：

我就是这样做的：

我像这样更新了数据表：

<h:dataTable id="persons" value="#{tableBean.persons}" var="person" rowClasses="#{tableBean.calculatedRowClasses}">

因此，使用 bean：rowClasses="#{tableBean.calculatedRowClasses}"

然后我计算必要的 CSS 元素以添加到一个长字符串中：

public String getCalculatedRowClasses() {
    StringBuilder build = new StringBuilder();

    int total = persons.size();
    int factor = 99 / total;    //divide an integer results in an interger

    build.append("list-row-0");
    for (int i = 0; i < total; i++) {
        build.append(",");
        build.append("list-row-").append(i * factor);   //divide the css over the 100 available in style.css
    }

    return build.toString();
}

这不是最好的解决方案，但它适用于这种情况......

【讨论】：