样式化jsf数据表中的最后一条记录

时间:2012-02-06 21:20:44

标签: css jsf datatable

我遇到的情况是,我有更多的数据可以容纳在返回到dataTable元素的单行中。为了解决这个问题,我简单地将结果合并到一个单元格中。我正在寻找的是一种方法来确定我是否已到达结果集中的最后一个对象,以便我可以删除用作我的分隔符的底部边框。最终我不知道我将要处理多少个对象。

.most {
    background-color:cyan;
    border-bottom:medium solid black;
}
.last {
    border-bottom:none;
}

<h:dataTable id="myTable" value="#{flowData.selectedItem.profile}" var="profile" columnClasses="most, last">
<h:column>
    <h:inputText id="_last" value="#{profile.last}" />
    <h:inputText id="_first" value="#{profile.first}" />
    <h:inputText id="_middle" value="#{profile.middle}" />
    <h:inputText id="_city" value="#{profile.city}" />
    <h:inputText id="_state" value="#{profile.state}" />
</h:column>
</h:dataTable>

提前感谢任何输入。

1 个答案:

答案 0 :(得分:1)

这取决于您希望支持的IE浏览器版本。

如果您不关心IE6 / 7支持,那么您可以使用CSS2 :last-child伪类。

table.yourTableClass tbody tr td {
    background-color: cyan;
    border-bottom: medium solid black;
}
table.yourTableClass tbody tr:last-child td {
    border-bottom: none;
}

<h:dataTable ... styleClass="yourTableClass">

(是的,IE7支持CSS2伪类对应:first-child,但确实支持:last-child!)

如果您关心IE7,但不关心IE6,那么您也可以反过来使用border-top代替border-bottomnone on { {1}}:

:first-child

如果您还关心IE6(这些天是discutable),那么您就无法在托管bean内部自行生成行类(而不是列类!)。< / p>

table.yourTableClass tbody tr td {
    background-color: cyan;
    border-top: medium solid black;
}
table.yourTableClass tbody tr:first-child td {
    border-top: none;
}

<h:dataTable ... rowClasses="#{flowData.rowClasses}">

和这个CSS

public String getRowClasses() {
    StringBuilder builder = new StringBuilder();
    int size = selectedItem.getProfile().size(); // getProfiles() ?

    for (int i = 0; i < size; i++) {
        builder.append((i + 1 < size) ? "most," : "last");
    }

    return builder.toString();
}