[]
        
(Showing Draft Content)

그룹화

테이블 시트는 지정된 필드로 데이터 소스를 그룹화하는 기능을 지원합니다. 즉, 동일한 셀 내용을 자동으로 하나의 셀로 병합합니다. 그룹화된 열은 기준 열의 왼쪽에 배치되며, 다음과 같은 유형의 열로 구성됩니다:

  • 기준 열(Base column): 원래의 열 값을 포함합니다.

  • 요약 열(Summary column): 사용자 정의 수식으로 계산된 집계 결과를 포함합니다.

  • 슬라이서 열(Slicer column): 집계 결과의 세부 항목(슬라이스)을 포함합니다.

다음 이미지는 테이블 시트 그룹화에서의 다양한 열 유형을 보여줍니다.



TableSheet 클래스의 groupByremoveGroupBy 메서드를 사용하여 각각 그룹화를 추가하거나 제거할 수 있습니다.

다음 코드 샘플은 요약 열과 슬라이서 열을 포함한 그룹화 열을 추가하는 방법을 보여줍니다:

function grouping() {
    // 'sellingPackage' 필드를 기준으로 그룹화하며, 요약 필드와 슬라이서 필드를 포함
    sheet.groupBy([
        {
            caption: "Selling Package", field: "sellingPackage", width: 150, style: { backColor: "#F9CA9A" },
            summaryFields: [
                {
                    caption: "SUM(Unit Price)",
                    formula: "=SUM([unitPrice])",
                    slice: { field: "=YEAR([@validFrom])", width: 120, style: { backColor: "#FCE3CA", formatter: "#,##0.00" } },
                    width: 150,
                    style: { backColor: "#FAD7B2", formatter: "#,##0.00" }
                }
            ]
        }
    ]);
}

그룹화 레이아웃

테이블 시트는 Tabular, Outline, Condensed의 그룹 레이아웃을 제공하여 그룹화된 데이터를 최적의 방식으로 표시할 수 있도록 지원합니다.

Tabular 모드

이 모드에서는 그룹 필드, 요약 및 슬라이스에 대해 카테고리 또는 계산 열이 생성됩니다.

다음 이미지는 “Office” 열을 기준으로 데이터를 그룹화한 Tabular 레이아웃을 보여줍니다.

image

다음 샘플 코드는 Tabular 그룹 레이아웃을 구현하는 방법을 보여줍니다.

sheet.options.groupLayout.mode = GC.Spread.Sheets.TableSheet.GroupingLayout.tabular; 

Outline 모드

이 모드에서는 그룹화 필드명과 값이 머리글에 추가되고, 각 그룹 항목 앞에 계층 구조로 표시됩니다.

다음 이미지는 Outline 모드를 보여줍니다.

image

다음 샘플 코드는 Outline 그룹 레이아웃을 구현하는 방법을 보여줍니다.

sheet.options.groupLayout.mode = GC.Spread.Sheets.TableSheet.GroupingLayout.outline; 

Condensed 모드

이 모드는 모든 머리글 정보와 집계를 한 줄로 통합하여 머리글과 바닥글을 얇게 표시함으로써 표시를 간소화합니다.

다음 이미지는 Condensed 모드를 보여줍니다.

image

다음 샘플 코드는 Condensed 그룹 레이아웃을 구현하는 방법을 보여줍니다.

sheet.options.groupLayout.mode = GC.Spread.Sheets.TableSheet.GroupingLayout.condensed; 

제한 사항

  • Outline 및 Condensed 레이아웃에서는 슬라이서 그룹화 구성이 표시되지 않습니다. Tabular 레이아웃positionrelateTo 설정을 표시하지 않습니다.

  • Condensed 및 Outline 모드에서는 헤더 또는 푸터에 둘 이상의 요약 결과가 있는 경우 첫 번째 요약 결과만 표시됩니다.

  • detailColumnsVisible 메서드는 Outline 및 Condensed 모드에서는 작동하지 않습니다.

참고: SpreadJS 디자이너를 사용하여 이러한 그룹화 레이아웃 설정을 적용할 수 있습니다.

자세한 내용은 테이블 시트 디자인 모드 항목을 참고하시기 바랍니다.