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'
            }
        )
    )
));
    原文作者:谢鸢
    原文地址: https://segmentfault.com/a/1190000005631144
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞