Как построить динамическую сетку и показывать только три столбца подряд (JSF 2.2 и BootsFaces)

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>

через долгое время я написал приведенный выше код, но это ошибка givng типа 'h: panelgroup' должна быть правильно закрыта. Это означает, что я запустил PanelGroup, а затем закрыл строку, начал новую строку, а затем закрыл PanelGroup.

Итак, у кого-нибудь есть идея, как реализовать макет, в котором строка будет иметь три столбца (показывающих подробности объекта клиента на столбец), затем закройте строку и начните новую строку. Обвисулы, я не знаю, сколько объектов будет в списке.

Answer 1

BootFaces предлагает компонент, который обрабатывает это. В частности, вы можете использовать <b:panelGrid columns="3"> для достижения этой цели. Это даст вам динамическую сеточную систему, которая будет расти вертикально по мере того, как вы ее заполняете, но сохраняете количество строк, которое вы укажете.

Здесь вы можете увидеть компонент в действии, https://showcase.bootsfaces.net/layout/panelgrids.jsf

В PrimeFaces также есть компонент для этого, но я предполагаю, что вы хотите использовать BootFaces, поскольку ваш исходный код использует его. Если вы предпочитаете PrimeFaces, вы можете использовать компонент <p:dataGrid>, который делает нечто подобное. Этот компонент даже обрабатывает нумерацию страниц.