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