如何在JSF中以水平方向显示数据作为Asp.Net中的转发器？

Question

我在JSF中看到了datatable组件,它通常逐行呈现为表.但是,如果我想要显示不是垂直方向但水平方式的东西,我该怎么办？说,假设我想制作相册,所以我需要能够以列格式显示数据库表的行.

Answer 1

使用另一个UIData基于组件,您可以完全控制输出,例如Facelets' ui:repeat,Tomahawk t:dataList或RichFaces' rich:dataList或a4j:repeat.

例如

<ul>
    <ui:repeat items="#{bean.photos}" var="photo">
        <li><img src="#{photo.url}" alt="#{photo.title}" /></li>
    </ui:repeat>
</ul>

与例如结合

li { 
    display: inline;
    list-style-type: none;
}

该t:dataList和rich:dataList可以渲染<ul>和<li>为您服务.你只需要打印<img>(或者h:graphicImage你喜欢的话)并应用一个CSS镜头.

更新:作为奖励和横向滚动页面通常对用户体验不利,你想把它变成旋转木马.只需<ul>按如下方式设置元素的样式:

ul {
    width: 500px; /* Just pick whatever width it needs to be. */
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: none;
}