如何使用 JSF 和 CSS 获取 table 行的渐变背景？

Question

我可以在行上创建渐变背景（见屏幕截图），但这被硬编码为 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>

样式表：default/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 ;黑色是最后一行。

Answer 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();
}

这不是最佳解决方案，但在这种情况下有效...

如何使用 JSF 和 CSS 获取 table 行的渐变背景？

How to get a gradient background for table rows with JSF and CSS?

css

jsf

gradient

background