표시/접기 버튼 추가

리포트 시트의 Show/Collapse 버튼을 사용하면 특정 셀을 확장하거나 축소할 수 있습니다. 단, 리포트 시트에서는 Preview 렌더 모드에서만 셀의 Show/Collapse 기능이 동작합니다.

IReportTemplateCell 인터페이스의 showCollapseButton 속성을 true로 설정하면 템플릿 시트에 Show/Collapse 버튼을 추가할 수 있습니다.

이 showCollapseButton 속성은 리포트에서 해당 셀의 자식 셀을 접거나 펼칠 수 있는 버튼을 표시할지 여부를 제어합니다.

// 템플릿 시트에서 Show/Collapse 버튼을 설정
const columns = ['shipCountry', 'shipCity'];
templateSheet.setTemplateCell(0, 0, {
     type: 'Group',
     binding: 'Orders[shipCountry]',
     showCollapseButton: true,
});
templateSheet.setTemplateCell(0, 1, {
      type: 'List',
      binding: 'Orders[shipCity]',
});
reportSheet.refresh();

다음 이미지는 shipCountry 항목에 Show/Collapse 버튼이 추가된 결과를 보여줍니다:

셀 확장 및 축소

SpreadJS는 템플릿 시트에서 각 그룹화된 셀의 가시성을 동적으로 제어할 수 있는 기능을 제공합니다.

이를 통해 리포트 시트가 로드될 때 해당 셀 그룹이 확장된 상태로 표시될지, 축소된 상태로 표시될지를 정의할 수 있습니다. 이때 사용하는 속성이 IReportTemplateCell 인터페이스의 initialExpansionState 속성입니다.

이 기능은 특히 트리 그룹 리포트(Tree Group Report), 크로스 리포트(Cross Report), 계층형 데이터를 가진 표준 리포트 등을 설계할 때 유용합니다.

기본적으로 initialExpansionState 속성은 'Expanded'로 설정되어 있어, 별도 설정이 없다면 리포트 로드시 그룹화된 셀은 확장된 상태로 표시됩니다.

// 그룹화된 셀의 초기 확장 상태를 Expanded로 설정
templateSheet.setTemplateCell(r + 2, 0, {
        type: 'Group',
        binding: `Sales[${x}]`,
        spillDirection: 'Vertical',
        context: {
        vertical: r > 0 ? `A${r + 2}` : 'Default',
        },
        showCollapseButton: r !== 3,
        initialExpansionState: 'Expanded,
});

다음 이미지는 리포트가 처음 로드될 때 그룹화된 셀이 확장된 상태로 표시되는 모습을 보여줍니다: