グリッド：カスタム集計

FlexGrid列にはaggregateプロパティがあり、これを使用してグリッド全体または各グループのデータサマリーを表示できます。

ただし、aggregateプロパティでは柔軟性が不十分で、カスタムコードで集計値を計算しなければならない場合もあります。

下のグリッドには、「売上」と「費用」の差を示す「利益」列が含まれています。

「利益」列は、formatItemイベントで計算されます。通常のデータ項目に対する利益は、実際のデータ項目に基づいて計算されます。グループに対する利益は、グループのgetAggregateメソッドを使用して計算されます。

// 総計を表示するためのグループを作成します
var grandTotalsGroup = new wijmo.collections.PropertyGroupDescription('総計', 
    function(item, propName) {
        return '';
    }
);

// カスタム集計を使用したグリッド
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    autoGenerateColumns: false,
        columns: [ // 集計付きの列定義
        { binding: 'id', header: 'ID', width: 60, isReadOnly: true },
        { binding: 'country', header: '国' },
        { binding: 'product', header: '商品' },
        { binding: 'sales', header: '売上', aggregate: 'Sum' },
        { binding: 'expenses', header: '費用', aggregate: 'Sum' },
        { binding: 'profit', header: '利益', dataType: 'Number', isReadOnly: true }
    ],
    itemsSource: new wijmo.collections.CollectionView(data, {
        groupDescriptions: [
            grandTotalsGroup,
            'country'
        ]
    })
});

// カスタムセル計算
theGrid.formatItem.addHandler(function(s, e) {

    // セルと列フッターパネルのみ
    if (e.panel == s.cells) {
        // 行、列、データ項目（グループ記述）を取得します
        var r = s.rows[e.row];
        var c = s.columns[e.col];
        var item = s.rows[e.row].dataItem;
        var group = r instanceof wijmo.grid.GroupRow ? item : null;

        // 値が負であると仮定します
        var negative = false;

        // 利益を計算します
        if (c.binding == 'profit') {
            var profit = group
                ? group.getAggregate('Sum', 'sales') - group.getAggregate('Sum', 'expenses')
                : item.sales - item.expenses;
            e.cell.textContent = wijmo.Globalize.format(profit, c.format);
            negative = profit < 0;
        }
        // セルの「negative」クラスを更新します
        wijmo.toggleClass(e.cell, 'negative', negative);
    }
});