SMART datagrid格的列组可以聚集相关列并以多种形式进行布置。 通过columns属性，可以在列组中指定一个以上的子列，并且列组将会水平或垂直布置子列。 这时，因为列组也可以被包含在子列中，所以就有可能实现复杂的布局。
本次例题中，将会重新使用在Hello Grid例题中有提过的数据组和列。 下列代码中，name为CustomerGroup、DateGroup的列就是列组， 而如果设置属性中存在columns，网格就会判断为列组设置信息并创建ColumnGroup对象。 另外，也可以通过将type值明确指定为"group"而创建列组。
var columns = [
{
"name": "ProductName",
"fieldName": "product_name",
...
}, {
"name": "CustomerGroup",
"width": 200,
"layout": "vertical",
"columns": [
{
"name": "Country",
"fieldName": "country",
...
}, {
"name": "ChildGroup",
"layout": "horizontal",
"columns": [
{
"name": "CustomerId",
"fieldName": "customer_id",
...
}, {
"name": "CustomerName",
"fieldName": "customer_name",
...
}, {
"name": "Phone",
"fieldName": "phone",
...
}
]
}
}
]
}, {
"name": "Currency",
"fieldName": "currency",
...
}, {
"name": "DateGroup",
"type": "group",
"width": "200",
"columns": [
{
"name": "OrderDate",
"fieldName": "order_date",
...
}, {
"name": "ShipDate",
"fieldName": "ship_date",
...
}
]
}
];
通过ColumnGroup.layout属性，可以变更列组的布置方向。 如果点击上面的"Change Layout"按钮，就可以水平或垂直的方式交替变更*DateGroup"的布置方向。
var column = grdMain.columnByName('DateGroup');
if (column) {
column.setLayout(column.layout() == 'vertical' ? 'horizontal' : 'vertical');
}
但是，有时也会有不应该显示子列的标头或注脚的情况。 这时，如果点击上面的"Child Headers"按钮， 就会通过使用ColumnGroup.childHeadersVisible属性，交替隐藏或显示"DateGroup"的子列标头。 而且，如果点击"Child Footers"按钮，就会通过ColumnGroup.childFootersVisible属性，交替隐藏或显示"CustomerGroup"的子列注脚。
var column = grdMain.columnByName('DateGroup');
if (column) {
column.setChildHeadersVisible(!column.childHeadersVisible());
}
如果使用GridBase.visitAllColumns、visitColumns方法，可以实现相关列分组的所有列的所需操作。
获取所有列
获取显示中的列