범위 그룹
SpreadJS는 행 또는 열을 그룹화하여 아웃라인 형식으로 표시하는 기능을 제공합니다. 이 기능은 헤더 바깥쪽에 그룹의 레벨을 확장하거나 축소할 수 있는 별도의 영역을 생성합니다.
레벨 번호 버튼(Level Number Button)은 아웃라인이 존재하는 레벨 수를 표시하며, 해당 버튼이나 확장/축소 아이콘을 클릭하여 그룹을 확장하거나 축소할 수 있습니다.
아래 이미지는 행 그룹과 열 그룹의 예시를 보여줍니다.
또한, CSS 클래스를 통해 범위 그룹(Range Group)의 모양을 사용자 정의할 수 있습니다. 자세한 내용은 사용자 지정 범위 그룹 문서를 참조하시기 바랍니다.
행 또는 열 그룹 생성
Outline 클래스의 group 메서드를 사용하여 범위 그룹을 생성할 수 있으며, unGroup 메서드를 사용하여 그룹을 제거할 수 있습니다. 아래 이미지는 행 그룹과 열 그룹을 보여줍니다.
다음 예제 코드를 참고하여 행 및 열 그룹을 생성할 수 있습니다.
activeSheet.setRowCount(34);
// 셀 값 설정
activeSheet.setValue(0,0,"Product");
activeSheet.setValue(0,1,"2019 in Sales");
activeSheet.setValue(0,2,"2020 in Sales");
activeSheet.setValue(1,0,"Mobiles");
activeSheet.setValue(1,1,"350,000");
activeSheet.setValue(1,2,"500,000");
activeSheet.setValue(2,0,"Laptops");
activeSheet.setValue(2,1,"200,000");
activeSheet.setValue(2,2,"400,000");
// 행 및 열 그룹 설정
activeSheet.rowOutlines.group(1,2);
activeSheet.columnOutlines.group(1,2);
//activeSheet.rowOutlines.expand(0,false);
//activeSheet.columnOutlines.expand(0,false);
spread.invalidateLayout();
spread.repaint();또는, outlineRow 또는 outlineColumn 명령을 지정하고 execute 메서드를 사용하여 행 또는 열 그룹을 생성할 수 있습니다.
Ask ChatGPT
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var activeSheet = spread.getActiveSheet();
spread.commandManager().execute({cmd: "outlineRow", sheetName: activeSheet.name(), index: 4, count: 3}); // 작업을 지정하고 execute 메서드를 사용함참고: 열 아웃라인 기능은 스프레드시트에서 트리(Tree) 구조를 구성하는 데도 활용할 수 있습니다. 자세한 내용은 개요 열을 참조하시기 바랍니다.
그룹 방향 설정
direction 옵션에서 OutlineDirection 열거형을 사용하여 그룹의 방향을 forward(정방향) 또는 backward(역방향)로 지정할 수 있습니다.
정방향(Forward Direction) | 역방향(Backward Direction) |
|---|---|
|
|
다음 코드 샘플은 행 및 열 그룹의 방향을 설정하는 방법을 보여줍니다.
activeSheet.rowOutlines.group(1,2);
activeSheet.columnOutlines.group(1,2);
activeSheet.rowOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.backward);
activeSheet.columnOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.forward);
spread.invalidateLayout();
spread.repaint();그룹 찾기 및 축소하기
OutlineState 옵션을 사용하여 그룹을 찾아 축소하거나 확장할 수 있습니다.
activeSheet.rowOutlines.group(0,5);
var rgi = activeSheet.rowOutlines.find(1, 0);
rgi.state(GC.Spread.Sheets.Outlines.OutlineState.collapsed); // 그룹을 찾아 축소
spread.invalidateLayout();
spread.repaint();시트에서 개요(Outline) 표시
showRowOutline 및 showColumnOutline 메서드를 사용하여 행 및 열 개요의 표시 여부를 지정할 수 있습니다. 이 메서드는 값이 설정되지 않은 경우, 개요가 표시되는지를 나타내는 boolean 값을 반환합니다.
//showRowOutline 및 showColumnOutline 설정
activeSheet.showRowOutline(true);
activeSheet.rowOutlines.group(0, 2);
activeSheet.showColumnOutline(true);
activeSheet.columnOutlines.group(0, 2);
//activeSheet.rowOutlines.ungroup(0, 2);
//activeSheet.columnOutlines.ungroup(0, 2);
spread.invalidateLayout();
spread.repaint();