CollectionView로 뷰(View) 만들기

CollectionView 클래스는 데이터 컬렉션을 그룹화, 정렬, 필터링 및 탐색하기 위한 뷰(View)를 나타냅니다.

정렬

정렬은 __SortDescriptions__를 통해 컨트롤 됩니다. SortDescription은 다음의 두 속성만 가진 객체입니다:

• property - 컬렉션에서 정렬할 속성의 문자열 이름
• ascending - 정렬이 오름차순인지 내림차순인지 결정하는 불리언(boolean) 값

CollectionView.sortDescriptions 속성을 사용하여 정렬할 필드와 방향을 지정합니다.

예시

아래에 생성된 __SortDescription__은 country 속성을 ascending 순서로 정렬하는 정렬 설명 객체를 만듭니다.

import * as wijmo from '@grapecity/wijmo';

let cv = new wijmo.CollectionView(data);

let sd = new wijmo.SortDescription("country", true);

// add the SortDescription to the collectionview's sortDescriptions array property.
cv.sortDescriptions.push(sd);

__CollectionView__의 sortDescriptions 배열이 업데이트될 때 정렬됩니다.

인터네셔널 정렬

CollectionView 클래스는 정렬을 위한 문자열을 비교하는데 Intl.Collator 클래스를 사용합니다. 이 클래스는 글로벌 어플리케이션에서 자주 나타나는 분음 부호(악센트)와 소문자/대문자를 처리합니다.

기본적으로 CollectionView 클래스는 문자열을 비교하는 데 기본 __Intl.Collator__를 사용하고, 다른 모든 객체를 비교하는 데 JavaScript를 사용합니다.

원하는 논리를 사용하여 두 값을 비교하는 함수로 CollectionView의 sortComparer 속성을 설정하여 이 값을 재정의할 수 있습니다.

다양한 기능을 보여주는 Demos 샘플을 확인하시길 바랍니다.

안정 정렬

CollectionView 클래스에는 데이터 개체의 필드를 기준으로 정렬할 때, 기존의 항목 순서를 유지할 수 있는 stableSort 속성이 있습니다.

stableSort 속성은 기본적으로 _false_로 설정되어 있으며 사용 비용이 있기 때문에, 필요한 경우에만 사용해야 합니다.

예시 Stable Sort 데모를 확인하실 수 있습니다.

필터링

CollectionView.filter 속성을 사용하여 뷰(View)에 포함되어야 하는 항목을 정의하는 필터 함수를 지정합니다.

예시

let view = new wijmo.CollectionView(getData());

view.filter = (item) => {
    // only return items with country value = 'US'
    return item.country == 'US';
};

체이닝

CollectionView.filter 속성을 사용하면 컬렉션에 대한 하나의 필터링 함수를 지정할 수 있습니다.

경우에 따라 둘 이상의 독립 필터 함수를 사용할 수 있습니다. 예를 들어, 들어오는 데이터에 필터를 적용하고 __FlexGridFilter__를 통해 데이터에 두 번째 필터링을 적용 할 수 있습니다.

이를 위해 여러 CollectionView 객체를 연결하여 한 컬렉션의 출력이 다음 컬렉션의 입력으로 사용되도록 합니다.

이 실행의 예는 ChainingDemo를 참고해주시기 바랍니다.

그룹화

CollectionView.groupDescriptions 속성을 사용하여 그룹화해야 되는 필드를 지정합니다. 먼저 PropertyGroupDescription 객체를 만든 다음 groupDescriptions 배열에 추가합니다.

예시

let cv = new wijmo.CollectionView(data);

let gd = new wijmo.PropertyGroupDescription("country");

// add the SortDescription to the collectionview's sortDescriptions array property.
cv.groupDescriptions.push(gd);

사용자지정 그룹(Custom Groups)

CollectionView 클래스를 사용하면 내용을 기준으로 항목을 그룹화할 수 있습니다. 대부분의 경우 내용은 속성 값(예: 제품, 색상, 국가)이지만, GroupDescription의 groupNameFromItem 메서드를 재정의하여 계산된 값으로 그룹화할 수도 있습니다.

사용자 지정 그룹화는 데이터를 값(예: 높음, 낮음, 중간), 날짜 범위(예: 이번 주, 올해) 등으로 그룹화하는 데 유용할 수 있습니다.

이 샘플은 이름의 첫 글자를 반환하는 __PropertyGroupDescription__을(를) 만들어 이를 보여줍니다. 초기값별로 데이터를 그룹화합니다:

페이징

페이징은 대용량 데이터를 처리하는 일반적인 기법입니다.

클라이언트 측 페이징

CollectionView 클래스는 기본적으로 클라이언트 측 페이징을 지원하므로, 적절한 양의 데이터만 포함되는 그리드와 표를 생성할 수 있습니다. 페이징을 활성화하려면 pageSize 속성을 설정하기만 하면 됩니다.

예시

let view = new wijmo.CollectionView(getData(), {
        pageSize: 6,
        pageChanged: updateCurrentPage
    });

페이지를 로드하는 여러 가지 메서드가 있습니다. 다음 메서드을 사용하여 페이지 탐색을 컨트롤 합니다:

• moveToFirstPage()
• moveToLastPage()
• moveToPreviousPage()
• moveToNextPage()
• moveToPage(pageNumber)

서버 측 페이징

서버 측 페이징은 한 번에 한 페이지의 데이터를 가져오는 요청으로 구성되어있습니다. 데이터를 검색하는 데 사용되는 실제 명령은 서버에서 제공되는 API에 따라 다릅니다.

Wijmo에는 OData 데이터 소스에 대한 서버 기반 페이징(정렬 및 필터링 포함)을 구현하는 ODataCollectionView 클래스가 포함되어 있습니다.

두 가지 접근 방식의 예는 Paging Demo를 확인하시길 바랍니다.