이번 스터디에서는 SpreadJS에서 제공하는 테이블 시트의 다중 그룹화 기능을 소개합니다. 

테이블 시트 슬라이스에 대한 내용은 이전 글을 참고해 주세요!

• 테이블 시트 시작하기 6 - 슬라이스

그룹 내에서 추가로 그룹화하기 

테이블 시트는 테이블 시트 시작하기 4 - 그룹화에서 소개한 단일 그룹화 뿐만 아니라, 그룹 내에서 한 단 계 더 그룹화를 실시하는 "다중 그룹화"도 지원합니다.

아래의 코드는 실제 예시입니다.  

테이블 시트 시작하기 4 - 그룹화에서 소개한 그룹화 설정에 다중 그룹화를 실시하기 위한 설정을 추가한 코드입니다.

// groupBy 메서드 사용, 다중 그룹화를 설정합니다.
tableSheet.groupBy([
　　 /* 첫 번째 그룹화 설정 */
    {
      caption: "카테고리",
      field: "categoryName",
      width: 150
    }, 
　　/* 두 번째 그룹화 설정 */
    {
      caption: "제품명",
      field: "productName",
      width: 150,
    }
]);

groupBy 메소드의 인수에 대해, 단일 그룹화를 실행하는 케이스와 같은 방법으로 그룹화 설정을 추가하여 다중 그룹화를 구현할 수 있습니다.

위의 코드를 이용한 샘플은 다음과 같습니다. 

카테고리 별로 그룹화된 데이터 내에서 제품명 별로 그룹화가 이루어져 있습니다.

그룹 요약, 슬라이스와 함께 사용 가능

본 시리즈의 다섯 번째 시리즈, 여섯 번째 시리즈에서는 그룹 요약이나 슬라이스 기능을 소개했습니다.

테이블 시트의 그룹화 기능 중 단일 그룹화는 다중 그룹화를 수행하는 경우에도 사용할 수 있습니다.

아래 예시는 위의 샘플에서 "제품명" 그룹에 그룹 요약을 적용하고 수주일의 연도(Year)에 따른 슬라이스를 적용한 예시입니다.

// groupBy 메서드 사용, 다중 그룹화를 설정합니다.
tableSheet.groupBy([
    /* 첫 번째 그룹화 설정 */
    {
     caption: "카테고리",
     field: "categoryName",
     width: 150
    }, 
    /* 두 번째 그룹화 설정 */
    {
     caption: "제품명",
     field: "productName",
     width: 150,
     // 그룹 요약 필드를 추가합니다.
     summaryFields: [{
        caption: "수주량",
        formula: "=SUM([unitsOnOrder])",
        width: 125,
        // 슬라이스(서브요약)를 설정합니다.
        slice: {
            field: "=YEAR([@orderDate])",
            width: 125
        },
     }]
    }
]);

위의 코드를 실행하면 다음과 같습니다.

이런 방식으로 다중 그룹화와 요약 및 슬라이스와 같은 기능을 결합하여 테이블 시트의 데이터를 다양한 형태로 보기 쉽게 정리하고 표시할 수 있습니다.

지금까지 테이블 시트의 다중 그룹화에 대해 알아보았습니다.

다음 스터디에서는 테이블 시트 데이터 계층 구조 표시 기능에 대해 알아보겠습니다.

감사합니다.

지금 바로 SpreadJS를 다운로드하여 직접 테스트해 보세요!

• SpreadJS 공식 홈페이지
• SpreadJS 튜토리얼 및 샘플
• SpreadJS Q&A
• SpreadJS FAQ