时间戳

首页 > 解决方案 > 如何构建动态网格并在一行中只显示三列（JSF 2.2 和 BootsFaces）

jsf - 如何构建动态网格并在一行中只显示三列（JSF 2.2 和 BootsFaces）

问题描述

我正在尝试使用 Bootsfaces 和 JSF 2.2 布局页面。我喜欢在一行中只显示三列，然后开始新行，但不知道如何实现。

<h:form>
    <b:container>
        <b:row>
        <ui:repeat value="#{ClientBean4.custs}" var="custs">
            <b:column col-md="4"><h:outputText id="output" value="#{ClientBean4.counter}" /> </b:column>
            <h:panelGroup rendered="#{ClientBean4.counter == 0}">
                </b:row><b:row>
            </h:panelGroup>
        </ui:repeat>
        </b:row>
    </b:container>
</h:form>

很长一段时间后，我写了上面的代码，但它给出了像'h：panelgroup'这样的错误应该正确关闭。有意义的是，我启动了 panelGroup，然后关闭了一行，启动了一个新行，然后关闭了 panelGroup。

那么，有没有人知道如何实现布局，其中一行将有三列（每列显示客户的对象详细信息），然后关闭该行并开始一个新行。显然，我不知道列表中有多少对象。

标签： jsfbootsfaces

解决方案

BootFaces 提供了一个组件来处理这个问题。更具体地说，您可以使用它<b:panelGrid columns="3">来实现这一点。这将为您提供一个动态网格系统，该系统将在您填充它时垂直增长，但保留您指定的行数。

您可以在此处查看该组件的运行情况，https://showcase.bootsfaces.net/layout/panelgrids.jsf

PrimeFaces 也为此提供了一个组件，但我假设您想使用 BootFaces，因为您的原始代码使用它。如果您更喜欢 PrimeFaces，您可以使用该<p:dataGrid>组件，它执行类似的操作。这个组件甚至可以处理分页。

推荐阅读