jsf - PrimeFaces のパネル グリッド レイアウト

Question

次のスナップショットに示すように<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>

次のスナップショットに示すように、レイアウトを示します。

最初のスナップショットに示されているレイアウトを実現するにはどうすればよいですか?

Answer 1

        <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 つの列を持たせたいので、それらに 2 番目の列を追加する必要があります。

うまくいけば、これで少し解決します。