계산된 필드(Calculated Fields)

계산된 필드(Calculated fields)는 __CollectionView__에 의해 작성되고 사용자정의 식을 사용하여 셀을 채우는 FlexGrid 컨트롤 내부에 배치되는 새 열입니다.

CollectionView 생성

먼저 __CollectionView__를 채울 데이터를 가져와야 합니다. 대부분의 경우 데이터베이스에 호출하지만, 여기서는 샘플 데이터를 사용합니다:

export function getData() {
    return [
        { product: ‘Banana’, brand: ‘Chiquita’, unitPrice: 45.95, qty: 12, discount: .08 },  
        { product: ‘Apple’, brand: ‘Granndy’, unitPrice: 65.95, qty: 23, discount: 0.02 },  
        ...,  
    ]
}

그 다음 이 데이터를 __CollectionView__에 전달합니다:

export function getCalculatedView() {
    return new CollectionView(getData() { ... });
}

사용자 지정 식 구현

이제 calculatedFields 속성을 사용하여, FlexGrid 컨트롤이 CalculatedFields 열을 만드는 데 사용하는 사용자지정 식을 만들 수 있습니다:

export function getCalculatedView() {
    return new CollectionView(getData() {
        calculatedFields: {
            fullName: ($) => [$.brand, $.product].join(' '),
            allCaps: ($) => $.fullName.toUpperCase(),  
            totalPrice: ($) => ($.unitPrice * $.qty) * (1 - $.discount),  
            tax: ($) => $.totalPrice * 0.12 
        }
    });
}

FlexGrid에 CollectionView 할당

이제 __CollectionView__가 FlexGrid의 __itemsSource__로 할당돼야 합니다. 그러나 이제 그리드의 새 열에 대한 바인딩으로 만든 __calculatedFields__를 사용할 수 있습니다:

new FlexGrid(‘#theGrid’, {
    alternatingRowStep: 0,  
    showMarquee: true,  
    selectionMode: ‘MultiRange’,  
    autoGenerateColumns: false,  
    columns: [  
        // regular data fields  
        { binding: ‘product’, header: ‘Product’ },  
        { binding: ‘brand’, header: ‘Brand’ },  
        { binding: ‘unitPrice’, header: ‘Unit Price’, format: ‘c’ },  
        { binding: ‘qty’, header: ‘Quantity’, format: ‘n0’ },  
        { binding: ‘discount’, header: ‘Discount’, format: ‘p0’ },  
        // calculated fields  
        { binding: ‘fullName’, header: ‘Full Name’, cssClass: ‘calculated’ },  
        { binding: ‘allCaps’ header: ‘UpperCase’ cssClass: ‘calculated’ },  
        { binding: ‘totalPrice’, header: ‘Total Price’, format: ‘c’ cssClass: ‘calculated’ },  
        { binding: ‘tax’, header: ‘Tax Amount’, format: ‘c’, cssClass: ‘calculated’ },  
    ],  
    itemsSource: getCalculatedView()  
});

__calculatedFields__를 일반 데이터 필드와 구별하기 위해 CSS도 추가합니다.

.calculated {
    background-color: azure;
}