다중 그룹화

테이블 시트는 groupBy 메서드에서 둘 이상의 필드를 정의하여 다중 수준 그룹화를 생성하는 기능을 지원합니다.

다음 코드는 테이블 시트 뷰에서 다중 그룹화를 설정하는 방법을 보여줍니다.

function grpByMultipleFields() {
    // group by "sellingPackage" field first and then group by date in quarters of available years using DATEPART formula
    sheet.groupBy([
        { caption: "Selling Package", field: "sellingPackage", width: 150, style: { backColor: "#FAD7B2" } },
        { caption: "Year Quarter", field: `=DATEPART([@validFrom],"yyyyQQQ")`, width: 150, style: { backColor: "#FCE3CA" } }
    ]);
}

다중 그룹화 동작

테이블 시트에 다중 그룹화를 적용할 때, 기본적으로 레이아웃이 더 많은 공간을 차지합니다. 다중 그룹화의 결과를 더 잘 보여주기 위해 다음과 같은 동작이 적용됩니다.

• 그룹이 축소되면, 상세 열의 셀은 빈 셀로 표시됩니다.

  
  

  
  

• 상위 그룹이 축소되면, 하위 그룹의 셀도 빈 셀로 표시됩니다.

  
  

  
  

  
  

또한 expandGroup 및 expandGroupItem 메서드를 사용하여 다중 그룹화의 확장 또는 축소 상태를 설정할 수 있습니다.

다중 그룹화 필드

SpreadJS는 이미 다중 그룹화를 지원합니다. 따라서 다중 그룹화와 관련된 다양한 필드는 아래 이미지에 나타납니다:

• Grouping Header: 다른 수준의 그룹 항목에 대해 헤더 이름을 설정할 수 있습니다.

• Grouping Footer: 그룹 항목 하단에 표시되는 다양한 집계값을 그룹 푸터라고 합니다.

• Aggregations: 서로 다른 열에 대해 독립적인 그룹 헤더 또는 푸터에 다양한 집계식을 정의할 수 있습니다.

• Aggregation Captions: 각 집계 수식에 대한 별칭(caption)을 설정하여 계산된 결과와 함께 표시할 수 있습니다.

• Summary Style: 그룹 헤더 또는 푸터에 대해 backcolor, formatter, forecolor 또는 기타 글꼴 관련 속성과 같은 다양한 스타일을 적용할 수 있습니다.

위의 모든 그룹화 필드는 아래의 groupBy 메서드를 사용하여 적용할 수 있습니다:

sheet.groupBy([ 
    { 
        field: "Office", 
        style: { foreColor: '#000000', backColor: '#a1c0c5' }, 
        summaryFields: [ 
            { 
                caption: "SUM_AMOUNT", 
                formula: '=SUM([Amount])', 
                relateTo: "Amount", 
                style: { 
                    formatter: "$ #,##0.00", 
                    backColor: '#bce4df', 
                    foreColor: '#000000' 
                } 
            }, 
            { 
                caption: "Σ(Count)", 
                formula: "=SUM([Quantity])", 
                style: { 
                    foreColor: '#000000' 
                } 
            }, 
        ]} 

• Spacing: Outline 및 Condensed 그룹화 모드에서 그룹 수준 항목 간의 간격을 spacing 속성을 설정하여 지정할 수 있습니다.

  다음은 spacing 속성을 구현하는 샘플 코드입니다:

  sheet.options.groupLayout = { 
      mode: GC.Spread.Sheets.TableSheet.GroupLayoutMode.outline, 
      spacing: { 
          row: 20 
      } 
  }; 

• Position: position 속성을 사용하여 기본 요약 위치를 header에서 footer로 변경할 수 있습니다.

  다음은 position 속성을 구현하는 샘플 코드입니다.

  sheet.options.groupLayout.position = 'footer';