如何在JSF中以水平方向显示数据作为Asp.Net中的转发器？ [英] How do I display data in horizontal orientation in JSF as repeater in Asp.Net?

问题描述

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

I saw datatable component in JSF and it typically renders as table row by row. But what do I do if I want to display something not in vertical orientation but in horizontal manner? Say, suppose I want to make a photo album so I need to be able to display rows of database table in column format.

推荐答案

利用另一个 基于UIData 的组件，您可以完全控制输出，例如 Facelets' ui：repeat ， Tomahawk的 t：dataList 或 RichFaces' rich：dataList 或 a4j：重复 。

Make use of another UIData based component wherein you have full control over the output, such as Facelets' ui:repeat, Tomahawk's t:dataList or RichFaces' rich:dataList or 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。

The t:dataList and rich:dataList can render <ul> and <li> for you. You just have to print the <img> (or h:graphicImage if you prefer that) and apply a shot of CSS.

更新：作为奖励，横向滚动页面通常对用户体验不利，你想要成为一个旋转木马。只需设置< ul> 元素，如下所示：

Update: as a bonus and as horizontally scrolling the page is generally bad for UX, you'd like to make it a carousel. Just style the <ul> element as follows then:

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

这篇关于如何在JSF中以水平方向显示数据作为Asp.Net中的转发器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！