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: '#ddd'
    },
    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'
            }
        )
    )
));