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>

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;黑色是最后一排。

Answer 1

我就这样做了：

我像这样更新了dataTable：

<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获取表行的渐变背景？

1 个答案: