GoJS 繪圖 (七) ：表面板（tablePanel）

sushi 發(fā)布于2019-08-21 10:51 / 2502人閱讀

摘要：表板中的每個(gè)對(duì)象被放入由的值索引的和。面板會(huì)看行和列的所有在面板中的對(duì)象，以確定該表應(yīng)多少行和列。一行一列一行二列二行一列二行三列請(qǐng)注意，并非表中的每一個(gè)列需要有一個(gè)存在。屬性指定的寬度和或高度是否應(yīng)該承擔(dān)全部由面板給它的空間。

表板中的每個(gè)對(duì)象被放入由的值索引的GraphObject.row和GraphObject.column。面板會(huì)看行和列的所有在面板中的對(duì)象，以確定該表應(yīng)多少行和列。

diagram.add(g(
    go.Part,
    go.Panel.Table,
    g(
        go.TextBlock,
        {
            text: "一行一列",
            row: 0,
            column: 0,
            margin: 2,
            background: "#493"
        }
    ),
    g(
        go.TextBlock,
        {
            text: "一行二列",
            row: 0,
            column: 1,
            margin: 2,
            background: "#493"
        }
    ),
    g(
        go.TextBlock,
        {
            text: "二行一列",
            row: 1,
            column: 0,
            margin: 2,
            background: "#493"
        }
    ),
    g(
        go.TextBlock,
        {
            text: "二行三列",
            row: 1,
            column: 2,
            margin: 2,
            background: "#493"
        }
    )
));

請(qǐng)注意，并非表中的每一個(gè)“列”需要有一個(gè)GraphObject存在。
如果在一個(gè)“列”中有多個(gè)對(duì)象，他們可能會(huì)彼此重疊。

diagram.add(g(
    go.Part,
    "Table",
    {
        background: "#ffffd"
    },
    g(
        go.TextBlock,
        {
            text: "這里的文字會(huì)重疊",
            row: 0,
            column: 0
        }
    ),
    g(
        go.TextBlock,
        {
            text: "疊重會(huì)字文的里這",
            row: 0,
            column: 0
        }
    )
));

排列和對(duì)齊

一個(gè)面板中GraphObject的大小由許多因素決定的。GraphObject.stretch屬性指定的寬度和/或高度是否應(yīng)該承擔(dān)全部由面板給它的空間。當(dāng)?shù)膶挾群透叨炔焕煲蕴畛湓诮o定的空間，GraphObject.alignment其中如果它比可用空間小的對(duì)象放置屬性控制。一個(gè)也可拉伸寬度，同時(shí)豎直對(duì)準(zhǔn)。

在行對(duì)齊

diagram.add(g(
    go.Part,
    g(
        go.Panel,
        "Table",
        {
            defaultAlignment: go.Spot.Left
        },
        g(
            go.RowColumnDefinition,
            {
                column: 0,
                width: 200
            }
        ),
        g(
            go.RowColumnDefinition,
            {
                column:1,
                width: 15,
            }
        ),
        g(
            go.Panel,
            "Auto",
            {
                row: 0,
                column: 0,
                alignment: go.Spot.Left
            },
            g(
                go.Shape,
                "RoundedRectangle",
                {
                    fill: "#493"
                }
            ),
            g(
                go.TextBlock,
                "auot panel"
            )
        ),
        g(
            go.TextBlock,
            {
                text: "alignment: left",
                row: 0,
                column:2
            }
        ),
        g(
            go.Panel,
            "Auto",
            {
                row: 1,
                column: 0,
                alignment: go.Spot.Center
            },
            g(
                go.Shape,
                "RoundedRectangle",
                {
                    fill: "#493"
                }
            ),
            g(
                go.TextBlock,
                "auto panel"
            )
        ),
        g(
            go.TextBlock,
            {
                text: "alignment: center",
                row:1,
                column: 2
            }
        ),
        g(
            go.Panel,
            "Auto",
            {
                row:2,
                column: 0,
                alignment: go.Spot.Right
            },
            g(
                go.Shape,
                "RoundedRectangle",
                {
                    fill: "#493"
                }
            ),
            g(
                go.TextBlock,
                "auto panel"
            )
        ),
        g(
            go.TextBlock,
            {
                text: "alignment: right",
                row: 2,
                column: 2
            }
        )
    )
));

在列對(duì)齊

和行對(duì)齊一樣，這里不重復(fù)寫了。

跨越行或列

下面是一個(gè)包括跨列和行跨越一個(gè)例子。

diagram.add(g(
    go.Part,
    g(
        go.Panel,
        "Table",
        g(
            go.TextBlock,
            {
                text: "頂標(biāo)題",
                row: 0,
                column: 0,
                columnSpan: 3,
                stretch: go.GraphObject.Horizontal,
                margin: 2,
                background: "#394"
            }
        ),
        g(
            go.TextBlock,
            {
                text: "側(cè)標(biāo)題",
                row: 1,
                column: 0,
                rowSpan:2,
                margin: 2,
                stretch: go.GraphObject.Vertical,
                background: "#394"
            }
        ),
        g(
            go.TextBlock,
            {
                text: "一行一列",
                row: 1,
                column: 1,
                margin: 2,
                background: "#394"
            }
        ),
        g(
            go.TextBlock,
            {
                text: "一行兩列",
                row: 1,
                column: 2,
                margin: 2,
                background: "#394"
            }
        ),
        g(
            go.TextBlock,
            {
                text: "二行一列",
                row: 2,
                column: 1,
                margin: 2,
                background: "#394"
            }
        ),
        g(
            go.TextBlock,
            {
                text: "二行三列",
                row: 2,
                column: 3,
                margin: 2,
                background: "#394"
            }
        ),
        g(
            go.TextBlock,
            {
                text: "結(jié)尾",
                row: 3,
                column: 2,
                columnSpan: 2,
                margin: 2,
                background: "#394"
            }
        )
    )
));