如何在每行p：dataScroller上显示两条记录

Question

我在我的jsf项目中使用PrimeFaces。 p:dataScroller组件将一条记录列为一行。我想分割区域两列并列出每行两个记录。但我找不到任何文档这个问题。 Component link

Answer 1

您无法从组件执行此操作。没有选择例如在datascroller上配置columns="2"或其他东西。但是当我查看生成的html时，我看到了一个简单的

<ul class="ui-datascroller-list">
    <li class="ui-datascroller-item">...</li>
    <li class="ui-datascroller-item">...</li>
    <li class="ui-datascroller-item">...</li>
    <li class="ui-datascroller-item">...</li>
</ul>

生成结构。所以我开始用css玩一点（最后，在javascript的帮助下，客户端总是html和css）

所以我在stackoverflow中搜索了如何在两列中显示<ul>。有几个Q / A，包括HTML/CSS Making a list be in rows, 3 boxes per row?。在这种情况下，这并不完全有效，但它让我有信心我可以让它工作，我做到了。

添加：

.ui-datascroller .ui-datascroller-item {
    width: 48%;
    display: inline-block;
}

在线PrimeFaces展示使其成功。

使用31％可以获得3列

如果您想要“响应”（2或3或4或......列，具体取决于屏幕尺寸），请使用

Media Queries: How to target desktop, tablet and mobile?