Компоновка сетки панелей в PrimeFaces

Мне нужен макет <p:panelGrid> (или <h:panelGrid>), как показано на следующем снимке.

введите здесь описание изображения

Следующий код,

<p:panelGrid style="width: 100%;">
    <p:row>
        <p:column rowspan="9">a</p:column>
        <p:column rowspan="7">b</p:column>
        <p:column>c</p:column>
    </p:row>

    <p:row><p:column>d</p:column></p:row>
    <p:row><p:column>e</p:column></p:row>
    <p:row><p:column>f</p:column></p:row>
    <p:row><p:column>g</p:column></p:row>
    <p:row><p:column>h</p:column></p:row>
    <p:row><p:column>i</p:column></p:row>
    <p:row><p:column>j</p:column></p:row>
    <p:row><p:column>k</p:column></p:row>
</p:panelGrid>

показывает макет, как показано на следующем снимке.

введите здесь описание изображения

Как я могу добиться макета, как показано на первом снимке?


jsf grid-layout primefaces jsf-2.2 panelgrid
person Tiny    schedule 12.06.2014    source источник

Ответы (1)


arrow_upward
12
arrow_downward 

        <p:panelGrid style="width: 100%;">
            <p:row>
                <p:column rowspan="7">a</p:column>
                <p:column rowspan="5">b</p:column>
                <p:column>e</p:column>
            </p:row>

            <p:row>
                <p:column>f</p:column>
            </p:row>

            <p:row>
                <p:column>g</p:column>
            </p:row>

            <p:row>
                <p:column>h</p:column>
            </p:row>

            <p:row>
                <p:column>i</p:column>
            </p:row>

            <p:row>
                <p:column>c</p:column>
                <p:column>j</p:column>
            </p:row>

            <p:row>
                <p:column>d</p:column>
                <p:column>k</p:column>
            </p:row>

        </p:panelGrid>

Объяснение:

введите здесь описание изображения

Каждая строка будет пытаться расположиться под предыдущей строкой, где для нее есть место (где столбец не охватывает несколько строк).

Итак, после первой строки: следующие строки будут размещены в следующих позициях:

введите здесь описание изображения

Но так как вы хотите, чтобы в 6-й и 7-й строке было по 2 столбца, вам нужно добавить к ним второй столбец.

Надеюсь, это немного прояснит ситуацию.

person Emil Kaminski    schedule 12.06.2014
comment
Это работает, но я не понимаю логики этого :) - person Tiny; 12.06.2014
comment
Рад, что смог помочь, конструкция PanelGrid немного сложна, и мне потребовалось некоторое время, чтобы получить ее... Смотрите мой обновленный ответ для объяснения - person Emil Kaminski; 12.06.2014