뷰 생성

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

정렬

정렬은 SortDescriptions을 통해 제어됩니다. SortDescription은 두 가지 속성만을 가진 객체입니다.:

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

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

예제 아래에서 만든 SortDescription은 국가 속성을 오름차순으로 정렬하는 Sort Description 객체를 생성합니다.

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 속성을 원하는 로직을 사용하여 두 값을 비교하는 함수로 설정하여 이 값을 재정의할 수 있습니다.

데모에서 다양한 동작을 보여주는 샘플을 확인하시기 바랍니다.

안정적 정렬

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

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

예제로 Stable Sort(안정적 정렬) 데모를 확인해보시기 바랍니다.

필터링

CollectionView.filter 속성을 사용하여 뷰에 포함할 항목을 정의하는 필터 함수를 지정합니다.

예제

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


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

필터 연결

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

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

이를 위해 여러 CollectionView 객체를 체인으로 연결하여 한 컬렉션의 아웃풋이 다음 컬렉션의 입력으로 작동하도록 할 수 있습니다.

해당 구현의 예시를 보기 위해서는 필터 연결 데모를 확인하시기 바랍니다.

Grouping

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);

사용자 정의 그룹

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

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

이 샘플은 이름의 첫 글자를 반환하는 PropertyGroupDescription을 만들어 이를 보여줍니다. 이를 통해 데이터가 첫 글자별로 그룹화됩니다.

페이징

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

클라이언트 측 페이징

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

예제

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

페이지를 로드하는 메서드는 여러 가지가 있습니다. 다음 메서드를 사용하여 페이지 탐색을 제어할 수 있습니다.

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

Server-Side Paging

서버측 페이징은 한 번에 한 페이지의 데이터를 가져오는 요청을 만드는 것으로 구성됩니다. 데이터를 검색하는 데 사용되는 실제 명령은 서버가 노출한 API에 따라 다릅니다.

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

페이징 데모에서 두 가지 접근 방식의 예를 모두 확인 해보시기 바랍니다.

Previous
스피너
Next
통화