Question

我正在尝试使用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'之类的givng错误。意思是，我先启动panelGroup，然后关闭一行，再开始新一行，然后关闭panelGroup。

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

Answer 1

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

您可以在此处https://showcase.bootsfaces.net/layout/panelgrids.jsf

看到正在使用的组件

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

如何构建动态网格并仅连续显示三列（JSF 2.2和BootsFaces）

1 个答案: