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

2016-07-06 00:03:00

表板中的每个对象被放入由的值索引的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'
}
)
)
));