JSF - 可滚动数据表答案

【问题标题】：JSF - Scrollable DataTableJSF - 可滚动数据表
【发布时间】：2011-09-28 18:48:48
【问题描述】：

有没有办法在不使用 Rich Faces 的情况下实现可滚动的数据表？如果有人可以指点我一些代码示例或示例页面吗？谢谢。

【问题讨论】：

标签： jsf

【解决方案1】：

在 jsf 中使用 div 组件作为可滚动数据表并提及 height: 200px; overflow: auto; 属性中的 style 属性。

<div style="height: 200px; overflow: auto;">
    <h:dataTable value="#{facesBean.files}" var="file">
        <h:column>
            <f:facet name="header">
                <h:outputText value="Image"></h:outputText>
            </f:facet>
            <h:graphicImage value="#{files.image}" style="width:100px; height:100px;"></h:graphicImage>
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="Description"></h:outputText>
            </f:facet>
            <h:outputText style="font-weight:bold;" value="File Name:"></h:outputText>
            <h:outputText value="#{file.alt}"></h:outputText>
        </h:column>
    </h:dataTable>
</div>

【讨论】：

【解决方案2】：

这可以通过 CSS 来实现。您必须使用 css 属性 overflow:scroll 或 overflow-x 和 overflow-y。但请注意，不同的浏览器会以不同的方式处理此属性，因此您可能会导致不同的行为。

您将 h:dataTable 包装在 div 中。使用 css 更改 div 的属性并添加溢出属性以滚动。确保您的表格具有固定大小。

你可能想看看这个

http://anaturb.net/csstips/sheader.htm

-干杯:)

【讨论】：