GoJS 绘图 (七) ：表面板（tablePanel）

摘要：表板中的每个对象被放入由的值索引的和。面板会看行和列的所有在面板中的对象，以确定该表应多少行和列。一行一列一行二列二行一列二行三列请注意，并非表中的每一个列需要有一个存在。属性指定的宽度和或高度是否应该承担全部由面板给它的空间。

表板中的每个对象被放入由的值索引的GraphObject.row和GraphObject.column。面板会看行和列的所有在面板中的对象，以确定该表应多少行和列。

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"
        }
    )
));

请注意，并非表中的每一个“列”需要有一个GraphObject存在。
如果在一个“列”中有多个对象，他们可能会彼此重叠。

diagram.add(g(
    go.Part,
    "Table",
    {
        background: "#ffffd"
    },
    g(
        go.TextBlock,
        {
            text: "这里的文字会重叠",
            row: 0,
            column: 0
        }
    ),
    g(
        go.TextBlock,
        {
            text: "叠重会字文的里这",
            row: 0,
            column: 0
        }
    )
));

一个面板中GraphObject的大小由许多因素决定的。GraphObject.stretch属性指定的宽度和/或高度是否应该承担全部由面板给它的空间。当的宽度和高度不拉伸以填充在给定的空间，GraphObject.alignment其中如果它比可用空间小的对象放置属性控制。一个也可拉伸宽度，同时竖直对准。

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
            }
        )
    )
));

和行对齐一样，这里不重复写了。

下面是一个包括跨列和行跨越一个例子。

diagram.add(g(
    go.Part,
    g(
        go.Panel,
        "Table",
        g(
            go.TextBlock,
            {
                text: "顶标题",
                row: 0,
                column: 0,
                columnSpan: 3,
                stretch: go.GraphObject.Horizontal,
                margin: 2,
                background: "#394"
            }
        ),
        g(
            go.TextBlock,
            {
                text: "侧标题",
                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: "结尾",
                row: 3,
                column: 2,
                columnSpan: 2,
                margin: 2,
                background: "#394"
            }
        )
    )
));