데이터 그리드에 정보를 표시할 때 데이터베이스에 있는 값을 기반으로 계산되지만 데이터베이스에는 저장되지 않는 값을 표시하고 싶을 때가 있을 수 있습니다. Wijmo 2020 v3 릴리스에서는 이러한 작업을 할 수 있게 해주는 새 속성인 calculatedFields를 Wijmo의 CollectionView에 추가했습니다. 계산된 필드는 CollectionView에 의해 만들어지는 새로운 열로, 사용자 정의 식을 사용해 셀을 채우는 FlexGrid 내부에 배치됩니다. 

이 블로그에서는 calculatedFields를 구현하는 단계를 간략히 설명하고 JavaScript에서 구현할 수 있는 사용자 정의 식이 얼마나 유용한지 보여드리겠습니다.

Wijmo는 가장 빠르고 가장 유연한 JavaScript DataGrid와 함께 정렬, 그룹화, 검색, Excel과 유사한 필터링, DataMaps, 사용자 정의 CellTemplates, 스파크라인, 풍부한 편집, ExcelPDF 내보내기, 유효성 검사, DetailsRows 등의 기능을 제공합니다. 여기에서 전체 Wijmo 컴포넌트 라이브러리를 다운로드하실 수 있습니다.

필수 모듈을 가져오는 방법

첫 번째로 해야 할 것은 필수 모듈을 app.js 파일로 가져오는 것입니다.

import ‘@grapecity/wijmo.styles/wijmo-core.css’;
import ‘./styles.css’;  
import { FlexGrid } from ‘@grapecity/wijmo.grid’;  
import { getCalculatedView } from ‘./data’;

그리드인 FlexGrid 모듈의 스타일을 지정하는 데 사용할 CSS 파일을 가져옵니다. 이제 데이터 그리드 및 getCalculatedView를 만들 수 있습니다. 그러면 그리드 내에서 렌더링될 데이터가 반환됩니다.

CollectionView 만들기

그런 다음에는 data.js 파일 내에 getCalculatedView 메서드를 만들어 CollectionView와 calculatedFields를 반환해야 합니다.

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

CollectionView 내에서 getData()를 호출하여 데이터 집합을 가져옵니다. 이 샘플에서 getData()는 코드에서 정의된 데이터 집합을 반환합니다. 대부분의 경우 이것은 데이터를 가져올 데이터베이스에 대한 호출입니다.

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 },  
  ...,  
];  
}

calculatedFields 내에서 사용자 정의 식 구현

CollectionView를 FlexGrid에 할당하기 전에 해야 할 마지막 작업은 새 열을 채우는 데 사용될 사용자 정의 식을 만드는 것입니다.

calculatedFields'calculatedFields' 사용자 정의 식에서는 함수 기반 식과 문자열 기반 식을 모두 지원합니다.

이 샘플에서는 함수 기반 식을 사용해 calculatedFields의 값을 계산할 것입니다.

데이터의 각 데이터 항목에 대해 Brand와 Product가 있지만, 이 두 값을 하나의 열에 표시하고 싶은 경우가 있습니다.

따라서 이 두 문자열을 결합하는 필드를 만들겠습니다.

fullName: ($) => [$.brand, $.product].join(‘ ‘),

여기서는 fullName 필드에 함수를 할당하고 "\$"를 인수로 전달합니다. calculatedFields'calculatedFields' 사용자 정의 식에서 "$" 값은 현재 데이터 항목을 나타냅니다.

함수 내에서 현재 데이터 항목의 brand와 product 값을 가져와 join() 문을 사용해 결합하고 두 값 사이에 공백을 배치합니다.

새 필드 내에 먼저 만든 필드를 사용할 수도 있습니다. fullName 필드와 fullName의 값을 대문자로 표시하는 toUpperCase() 메서드를 사용하는 새 필드인 allCaps를 만듭니다.

allCaps: ($) => $.fullName.toUpperCase(),

끝으로 calculatedFields 내에 totalPrice와 tax라는 두 개의 필드를 더 만듭니다.

다음과 같이 totalPrice 필드에서는 단가, 수량, 현재 데이터 항목의 할인을 사용해 해당 주문의 총 가격을 계산합니다.

tax 필드에서는 totalPrice 필드를 사용해 주문에서 지불된 세금을 계산합니다.

totalPrice: ($) => ($.unitPrice * $.qty) * (1 - $.discount),  
tax: ($) => $.totalPrice * 0.12

아래에서 완료된 calculatedFields 개체의 코드를 확인하실 수 있습니다.

calculatedFields: {  
fullName: ($) => [$.brand, $.product].join(‘ ‘),  
allCaps: ($) => $.fullName.toUpperCase(),  
totalPrice: ($) => ($.unitPrice * $.qty) * (1 - $.discount),  
tax: ($) => $.totalPrice * 0.12  
}

CollectionView를 FlexGrid에 할당

끝으로 app.js 파일에서 다음과 같이 CollectionView를 FlexGrid에 할당하고 표시될 열을 정의합니다.

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 속성 개체를 열에 대한 바인딩으로 사용할 수 있습니다.

또한 이 열에 몇 가지 고유한 스타일을 지정하여 데이터 소스에서 돋보이게 합니다.

.calculated {  
background-color: azure;  
}

이제 다 끝났습니다!

우리는 데이터 소스의 데이터를 사용하는 열 집합과 사용자 정의 식을 통해 만들어진 데이터가 담긴 다른 열 세트를 갖게 되었습니다.

여기에서 이 샘플을 실시간으로 확인하실 수 있습니다.