계산된 필드(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;
}