グリッド：グループ化

グリッドは、ソースCollectionViewを介したグループ化をサポートしています。

グリッドのcollectionView.groupDescriptionsにいくつかのGroupDescriptionオブジェクトを追加することで、1つ以上のプロパティに基づいてデータをグループ化します。

次の例では、国と商品に基づいてデータをグループ化しています。

// 基本のグループ化
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: new wijmo.collections.CollectionView(data, {
        sortDescriptions: [ 'country', 'product' ],
        groupDescriptions: [ 'country', 'product' ]
    })
});

また、冗長なデータが表示されないように、グループ化された列を非表示にすることもできます。

次の例では、国と商品に基づいてデータをグループ化し、それらの列を非表示にしてシンプルな外観を実現しています。

// グループ化される列を非表示にします
var theGridHideCols = new wijmo.grid.FlexGrid('#theGridHideCols', {
    autoGenerateColumns: false,
    columns: [
        { binding: 'country', header: '国', visible: false },
        { binding: 'product', header: '商品', visible: false },
        { binding: 'downloads', header: 'DL数', width: '*' },
        { binding: 'sales', header: '売上', width: '*' },
        { binding: 'expenses', header: '費用', width: '*' },
    ],
    itemsSource: new wijmo.collections.CollectionView(data, {
        sortDescriptions: [ 'country', 'product' ],
        groupDescriptions: [ 'country', 'product' ]
    })
});

グリッド：グループ化