JavaScript 데이터 그리드에 계산된 필드 만들기
페이지 정보
작성자 GrapeCity 작성일 2021-01-27 11:37 조회 3,835회 댓글 0건본문
관련링크
데이터 그리드에 정보를 표시할 때 데이터베이스에 있는 값을 기반으로 계산되지만 데이터베이스에는 저장되지 않는 값을 표시하고 싶을 때가 있을 수 있습니다. 2020 v3 릴리스에서는 이러한 작업을 할 수 있게 해주는 새 속성인 calculatedFields를 Wijmo의 CollectionView에 추가했습니다. 계산된 필드는 CollectionView에 의해 만들어지는 새로운 열로, 사용자 정의 식을 사용해 셀을 채우는 FlexGrid 내부에 배치됩니다.
이 블로그에서는 calculatedFields를 구현하는 단계를 간략히 설명하고 JavaScript에서 구현할 수 있는 사용자 정의 식이 얼마나 유용한지 보여드리겠습니다.
Wijmo는 와 함께 , , , , , , , , , , 등의 기능을 제공합니다. 에서 전체 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;
}
이제 다 끝났습니다!
우리는 데이터 소스의 데이터를 사용하는 열 집합과 사용자 정의 식을 통해 만들어진 데이터가 담긴 다른 열 세트를 갖게 되었습니다.
에서 이 샘플을 실시간으로 확인하실 수 있습니다.
댓글목록
등록된 댓글이 없습니다.