행과 열 분할 크기 조정

SpreadJS는 스프레드시트 작업 중 분할 크기 조정(Split Resize) 기능을 지원합니다.

분할 크기 조정 작동 방식

Split Resize 기능은 현재 행 또는 열과 그 다음에 보이는 행 또는 열을 함께 크기 조정하면서, 시트 내의 나머지 행과 열에는 영향을 주지 않는 기능입니다. 이 기능은 인접한 행과 열이 화면에서 밀려나 뷰포트 밖으로 벗어나는 현상을 방지합니다.

예를 들어, Split Resize 모드에서 열 A를 조정하면 열 B도 함께 크기 조정되지만, 열 C, D, E, F, G, H, I 등 나머지 열의 크기는 변경되지 않습니다. 따라서 전체 뷰포트 영역은 영향을 받지 않고 유지됩니다.

반면, 일반 크기 조정(Normal Resize) 모드에서는 행 또는 열을 조정할 경우 그 오른쪽 또는 아래쪽에 있는 모든 행/열이 밀려나면서 일부는 뷰포트 밖으로 사라질 수 있습니다.

하지만 Split Resize 모드를 사용하면, 다른 행과 열의 위치는 변경되지 않고, 조정된 행/열만 크기 변화가 적용됩니다.

사용 사례

Split Resizing은 특히 금융, 은행, 주식, 트레이딩 애플리케이션과 같은 복잡한 애플리케이션을 분석할 때 유용합니다. 또한 Split Resize 모드로 작업하면 스프레드시트를 내보내거나 인쇄할 때 페이지 구분(pagination)에 영향을 주지 않기 때문에 유리합니다. 반면, 일반 크기 조정 모드에서는 행이 다음 페이지로 밀려나거나 마지막 열이 잘리는 현상이 발생할 수 있습니다.

주식 애플리케이션 분석을 수행하는 워크시트에서 금년도에 고객에게 판매한 여러 주식의 투자 성과를 비교해야 하는 시나리오를 가정해봅시다.

다음 두 가지 크기 조정 모드는 데이터가 어떻게 영향을 받는지를 보여줍니다.

Split Resize Mode - 위의 스프레드시트에서 첫 번째 열(Stock Investment Name)을 크기 조정하더라도, 마지막 열인 수익/손실 비율(gain/loss %)을 동일한 뷰포트에서 좌우 스크롤 없이 계속 추적할 수 있습니다.

Normal Mode - 일반 모드에서 열 A(Stock Investment Name)를 크기 조정하면, 마지막 열이 뷰포트 밖으로 밀려나게 되어 중요한 정보(예: 수익/손실 비율)를 놓치게 될 수 있습니다.

분할 크기(Split Resizing) 활성화

행과 열을 크기 조정할 때, 사용자는 "normal"과 "split" 두 가지 모드 중에서 선택할 수 있습니다. 기본 설정은 normal입니다. 그러나 Ctrl 키를 누른 상태에서 행이나 열을 조정하면 Split Resize 기능이 자동으로 사용됩니다.

ResizeMode 열거형에서 "split" 옵션을 사용하여 Split Resize 기능을 활성화할 수 있습니다.

ResizeMode 가 split으로 설정된 경우:

• 사용자는 하나의 행 또는 열만 선택할 수 있습니다 (전체 행/열 포함).

• 여러 행 또는 열을 선택하면 Split Resize 기능은 작동하지 않고, 일반 모드로 크기 조정됩니다.

• 한 뷰포트(고정 행 또는 고정 열로 나뉜 뷰포트 포함)에서 마지막 행 또는 열을 크기 조정하는 경우, Split Resize 기능은 작동하지 않고 일반 모드로 동작합니다.

• 행 또는 열이 보이지 않는 경우(열 너비 = 0 또는 숨겨진 경우), 수정된 행 또는 열은 다음에 보이는 행 또는 열과 함께 크기 조정됩니다.

Split Resize 모드에서 다음 작업을 수행할 수 있습니다:

• 워크시트에서 행과 열을 숨기기

• 행과 열의 높이 및 너비를 0으로 조정하기

• 확대/축소(zoom) 기능이 활성화된 상태에서도 행과 열 크기 조정 가능

코드 예

다음 예제 코드는 Split Resize 모드에서 행과 열을 크기 조정하는 데 사용됩니다.

$(document).ready(function () {
    // Spread 초기화
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

    // 활성화 시트 가져오기 
    var activeSheet = spread.getSheet(0);
    // columnResizeMode & rowResizeMode를'Split'로 설정 
    spread.options.columnResizeMode = GC.Spread.Sheets.ResizeMode.split;
    spread.options.rowResizeMode = GC.Spread.Sheets.ResizeMode.split;
    activeSheet.suspendPaint();
    var colHeader = GC.Spread.Sheets.SheetArea.colHeader;
    activeSheet.setRowCount(12);
    activeSheet.setColumnCount(5);
    for (var i = 0; i < activeSheet.getColumnCount(GC.Spread.Sheets.SheetArea.viewport); i++)
        activeSheet.setColumnWidth(i, 120);
    activeSheet.setValue(0, 0, 'Stock Investment Name', colHeader);
    activeSheet.setValue(0, 1, 'Current Quote($)', colHeader);
    activeSheet.setValue(0, 2, 'Market Value($)', colHeader);
    activeSheet.setValue(0, 3, 'Total Cost($)', colHeader);
    activeSheet.setValue(0, 4, 'Gain/Loss(%)', colHeader);
    activeSheet.setArray(0, 0, [
        ["Citycon-Oyj Corporation", 232.460, 492.00, 500.00, '-1.6%'],
        ["M-Secure Corporation", 560.270, 312.00, 300.00, '4.0%'],
        ["Nortan Corporation", 433.220, 711.00, 688.50, '3.3%'],
        ["Teski Corporation", 232.310, 693.00, 465.90, '48.7%'],
    ]);
    spread.resumePaint();
});