Panel-grid-layout in PrimeFaces

Ich möchte ein layout von <p:panelGrid> (oder <h:panelGrid>), wie gezeigt, in der folgende snap shot.

Den folgenden code,

<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>

zeigt die Anordnung, wie gezeigt, in der folgende snap shot.

Panel-grid-layout in PrimeFaces

Wie kann ich erreichen, das layout, wie gezeigt, im ersten snap shot?

InformationsquelleAutor Tiny | 2014-06-12

        <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>

Erklärung:

Panel-grid-layout in PrimeFaces

Jede Zeile wird versuchen, sich unter der vorhergehenden Zeile, wo es Raum für Sie (wo eine Spalte ist, die nicht über mehrere Zeilen).

Also nach der ersten Zeile: in den nächsten Zeilen werden in die folgenden Positionen:

Panel-grid-layout in PrimeFaces

Aber da willst du die 6. und 7. Zeile, 2 Spalten, die Sie benötigen, um eine zweite Spalte hinzufügen, um Sie.

Hoffentlich klärt es ein wenig auf.

Das funktioniert, aber ich verstehe nicht die Logik dahinter 🙂
Froh, dass ich helfen konnte, die PanelGrid Konstruktion ist ein wenig kompliziert, und ich nahm mir einige Zeit, um es zu bekommen... Siehe meine aktualisierte Antwort für die Erklärung
Sehr gute Erklärung.

InformationsquelleAutor Emil Kaminski

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.