테이블 시트 테이블 시트 시작하기 7 - 다중 그룹화
페이지 정보
작성자 GCK루카스 작성일 2023-08-01 09:08 조회 173회 댓글 0건본문
관련링크
이번 스터디에서는 SpreadJS에서 제공하는 테이블 시트의 다중 그룹화 기능을 소개합니다.
테이블 시트 슬라이스에 대한 내용은 이전 글을 참고해 주세요!
그룹 내에서 추가로 그룹화하기
테이블 시트는 테이블 시트 시작하기 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를 다운로드하여 직접 테스트해 보세요!
댓글목록
등록된 댓글이 없습니다.