테이블 시트 시작하기 4 - 그룹화 > 온라인 스터디

테이블 시트 테이블 시트 시작하기 4 - 그룹화

추천0

페이지 정보

작성자 GCK루카스

작성일 2023-06-23 15:42 조회 203회 댓글 0건

본문

관련링크

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

테이블 시트 패널 설정 방법에 대한 내용은 이전 글을 참고해 주세요!

테이블 시트 시작하기 3 - 패널 설정

데이터 그룹화

테이블 시트에서는 모든 열 정보를 기반으로 데이터를 그룹화하고 표시할 수 있습니다. 아래는 "테이블 시트 시작하기 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, /* 열의 스타일을 설정합니다. */
    }]);
});

위 코드를 실행하면 그룹 열의 스타일이 다음과 같이 변경됩니다.