테이블 시트 테이블 시트 시작하기 4 - 그룹화
페이지 정보
작성자 GCK루카스 작성일 2023-06-23 15:42 조회 205회 댓글 0건본문
관련링크
이번 스터디에서는 SpreadJS 에서 제공하는 테이블 시트의 그룹화 기능을 소개합니다.
테이블 시트 패널 설정 방법에 대한 내용은 이전 글을 참고해 주세요!
데이터 그룹화
테이블 시트에서는 모든 열 정보를 기반으로 데이터를 그룹화하고 표시할 수 있습니다. 아래는 "테이블 시트 시작하기 1"의 방법으로 초기화 후 "카테고리" 열의 데이터를 대상으로 그룹화한 샘플입니다.
이 기능은 복잡한 데이터를 그룹으로 정리하여 보기 쉽게 표현할 수 있으며, 데이터 옆에 표시되는 아이콘을 활용하여 그룹을 접거나 확장할 수 있습니다.
groupBy 메소드
테이블 시트에서는 TableSheet 클래스에 있는 groupBy 메소드를 이용하여 그룹화를 설정합니다. 아래 코드는 위 샘플 중 그룹화 설정 부분의 코드입니다.
productTable.fetch().then(function () { tableSheet.setDataView(view); tableSheet.groupBy([ { caption: '카테고리', field: 'categoryName', width: 150, }, ]); });
그룹화할 때 groupBy 메소드의 인수에 여러 옵션을 설정할 수 있습니다. 설정할 수 있는 옵션은 다음과 같습니다.
옵션 이름 |
기능 |
caption |
그룹 열 헤더의 캡션을 설정합니다. |
conditionalFormats |
열의 데이터에 조건부 서식을 설정합니다. |
field |
그룹화할 데이터 필드를 지정합니다. |
headerFit |
헤더의 캡션 표시 방법을 지정합니다. |
headerStyle |
헤더 스타일을 설정합니다. |
style |
그룹 열의 스타일을 설정합니다. |
summaryFields |
그룹 요약을 설정합니다. |
validator |
그룹 열에 유효성 검사를 설정합니다. |
width |
그룹 열의 너비를 설정합니다. |
예를 들어 옵션으로 다음과 같이 headerStyle 와 Style 을 설정하면 그룹 열의 스타일을 자유롭게 조정할 수 있습니다.
// 테이블에 설정할 데이터를 가져와 성공 시 콜백 함수를 실행합니다. productTable.fetch().then(function () { // 테이블 시트에 뷰를 설정하여 표시합니다. tableSheet.setDataView(view); // 그룹 열의 헤더 스타일을 정의합니다. var groupHeaderStyle = { backColor: "#BB2353" }; // 그룹 열의 스타일을 정의합니다. var groupStyle = { foreColor: "#BB2353" }; // 그룹화를 설정합니다. tableSheet.groupBy([{ caption: "카테고리", field: "categoryName", width: 150, headerStyle: groupHeaderStyle, /* 헤더의 스타일을 설정합니다. */ style: groupStyle, /* 열의 스타일을 설정합니다. */ }]); });
위 코드를 실행하면 그룹 열의 스타일이 다음과 같이 변경됩니다.
또, summaryFields 를 이용하여 그룹 마다의 요약을 설정하거나, 나아가 그 슬라이스를 표시하는 것도 가능합니다. 이 부분은 다음 번 새로운 스터디에서 다시 자세히 소개하겠습니다.
지금까지 테이블 시트의 그룹화 기능에 대해 알아보았습니다.
다음 스터디에서는 테이블 시트 그룹 요약 기능에 대해 알아보겠습니다.
감사합니다.
지금 바로 SpreadJS를 다운로드하여 직접 테스트해 보세요!
댓글목록
등록된 댓글이 없습니다.