[]
데모 테마 디자이너 도움말 API
다른 샘플 다운로드
(Showing Draft Content)

FlexGrid의 사용자 정의 집계(Custom Aggregates)

FlexGrid 열에는 전체 그리드 또는 각 그룹에 대한 데이터 요약을 표시할 수 있는 aggregate 속성이 있습니다.


그러나 경우에 따라 aggregate 속성이 충분히 유연하지 않아, 사용자 지정 코드를 사용하여 집계를 계산해야 할 수 있습니다.


아래 그리드에는 'Sales'와 'Expenses'의 차이를 보여주는 'Profit' 열이 있습니다.


'Profit' 열은 formatItem 이벤트에서 계산됩니다. 일반 데이터 아이템의 수익은 실제 데이터 아이템을 기준으로 합니다. 그룹 수익은 그룹의 getAggregate 메서드을 사용하여 계산됩니다.

import * as wjCore from '@mescius/wijmo';
import * as wjGrid from '@mescius/wijmo.grid';

// create a group to show the grand totals
var grandTotalsGroup = new wjCore.PropertyGroupDescription('Grand Total', 
    function(item, propName) {
        return '';
    }
);

// grid with custom aggregates
var theGrid = new wjGrid.FlexGrid('#theGrid', {
    autoGenerateColumns: false,
        columns: [ // column definitions with aggregates
        { binding: 'id', header: 'ID', width: 60, isReadOnly: true },
        { binding: 'country', header: 'Country' },
        { binding: 'product', header: 'Product' },
        { binding: 'sales', header: 'Sales', aggregate: 'Sum' },
        { binding: 'expenses', header: 'Expenses', aggregate: 'Sum' },
        { binding: 'profit', header: 'Profit', dataType: 'Number', isReadOnly: true }
    ],
    itemsSource: new wjCore.CollectionView(data, {
        groupDescriptions: [
        grandTotalsGroup,
        'country'
        ]
    })
});

// custom cell calculation
theGrid.formatItem.addHandler(function(s, e) {

// cells and column footer panels only
if (e.panel == s.cells) {
    // get row, column, and data item (or group description)
    var r = s.rows[e.row];
    var c = s.columns[e.col];
    var item = s.rows[e.row].dataItem;
    var group = r instanceof wjGrid.GroupRow ? item : null;

    // assume value is not negative
    var negative = false;

    // calculate profit
    if (c.binding == 'profit') {
        var profit = group
            ? group.getAggregate('Sum', 'sales') - group.getAggregate('Sum', 'expenses')
            : item.sales - item.expenses;
        e.cell.textContent = wjCore.Globalize.format(profit, c.format);
        negative = profit < 0;
    }
    // update 'negative' class on cell
    wijmo.toggleClass(e.cell, 'negative', negative);
    }
});