FlexGrid의 그룹화(Grouping)
그리드는 CollectionView 소스를 통해 그룹화(grouping)를 지원합니다.
그리드의 collectionView.groupDescriptions에 GroupDescription 객체를 추가하여 하나 이상의 속성으로 데이터를 그룹화합니다.
국가 및 제품별로 데이터를 그룹화하는 예시입니다:
import * as wjCore from '@mescius/wijmo';
import * as wjGrid from '@mescius/wijmo.grid';
// basic grouping
var theGrid = new wjGrid.FlexGrid('#theGrid', {
itemsSource: new wjCore.CollectionView(data, {
sortDescriptions: [ 'country', 'product' ],
groupDescriptions: [ 'country', 'product' ]
})
});중복 데이터가 표시되지 않도록 그룹화되는 열을 숨길 수도 있습니다.
이 예시에서는 국가 및 제품별로 데이터를 그룹화하고, 해당 열을 숨겨 더 깔끔해 보이게 합니다:
// hide columns being grouped on
var theGridHideCols = new wjGrid.FlexGrid('#theGridHideCols', {
autoGenerateColumns: false,
columns: [
{ binding: 'country', header: 'Country', visible: false },
{ binding: 'product', header: 'Product', visible: false },
{ binding: 'downloads', header: 'Downloads', width: '*' },
{ binding: 'sales', header: 'Sales', width: '*' },
{ binding: 'expenses', header: 'Expenses', width: '*' },
],
itemsSource: new wjCore.CollectionView(data, {
sortDescriptions: [ 'country', 'product' ],
groupDescriptions: [ 'country', 'product' ]
})
});