[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

동적 열 크기

SpreadJS는 동적 열 크기 조정(Dynamic Column Sizing)(스타 크기 조정 또는 비율 크기 조정이라고도 함)을 지원합니다.

이 기능은 사용자가 지정한 가중치 비율(* 기호로 표시됨)에 따라 열 너비 및 행 높이를 설정하여 뷰포트를 정확하게 채우도록 구성됩니다.

이러한 유형의 크기 조정은 숫자와 함께 사용할 수 있으며, 가중치 비율은 다음과 같이 표현됩니다:

  • 가중치 요소는 * 또는 n*(n은 정수 예: 2*, 3* 또는 실수 예: 0.5*, 1.5* 등) 형식으로 표현됩니다.

  • 사용 가능 크기 = 뷰포트 크기 - 고정된(Visible Fixed) 크기

  • 사용 가능한 크기는 사용자가 정의한 가중치에 따라 표시 가능한 행이나 열에 분배됩니다.

  • 전체 열 너비 = 뷰포트 너비

사용 시나리오

동적 열 너비 조정은 사용자가 보고서를 분석하거나 대용량 스프레드시트를 다룰 때 여러 열의 너비를 비례적으로 조정해야 하는 경우에 특히 유용합니다.

예를 들어, 아래 이미지는 A, B, D, E 열에 각각 1.5*, 1.5*의 비율로 동적 열 너비 조정이 적용된 스프레드시트를 보여줍니다.


위 예제에서, 뷰포트에서 1.5*로 설정된 열 A와 B는 일반 * 크기의 열보다 1.5배 너비를 차지합니다.

지원되는 사용자 동작

동적 열 크기 조정(또는 비율 크기 조정)은 뷰포트 크기가 변경되거나 사용자가 행 또는 열을 추가, 삭제, 또는 크기 조정할 때마다 워크시트의 열과 행이 뷰포트를 정확하게 채우도록 보장합니다.

사용자는 워크시트에서 setColumnWidth 및 setRowHeight 메서드를 사용하여 동적 열 크기를 설정할 수 있습니다. 스타 크기(예: "*", "2*" 등)가 적용된 열과 행은 사용자가 워크시트에서 아래 작업을 수행할 때마다 자동으로 뷰포트를 채우도록 크기가 조정됩니다:

  • 사용자가 뷰포트의 크기를 변경하는 경우

  • 사용자가 열 또는 행을 추가, 삭제, 또는 크기 조정하는 경우

  • 사용자가 행 개수 또는 열 개수를 변경하는 경우

  • 사용자가 행 또는 열을 숨기거나 다시 표시하는 경우

  • 사용자가 행과 열을 그룹화하거나 그룹 해제하는 경우

  • 사용자가 행과 열에 필터를 적용하는 경우

  • 사용자가 워크시트의 개요 열을 펼치거나 접는 경우

또한, 동적 열 크기 조정은 JSON 파일을 가져오거나 내보낼 때에도 지원됩니다.

Ask ChatGPT

동적 열 크기 조정 규칙

워크시트에서 동적 열 크기 조정 기능을 사용할 때 다음 규칙을 반드시 염두에 두어야 합니다:

  • 하나의 시트에서 행과 열 모두에 스타 크기(*)를 설정할 수 있습니다.

  • 사용자가 스타 크기가 설정된 행 또는 열을 직접 크기 조정하거나, autoFitColumn / autoFitRow 메서드를 호출하면, 해당 행/열은 현재 실제 크기를 고정값으로 덮어씁니다.

    Split Resize 모드(※ nextTo 모드만 해당)에서 작업 중이라면, 선택한 행/열과 그 다음 행/열 모두 실제 고정 크기로 덮어씁니다.

  • 가장 작은 스타 크기 < 1 또는 사용 가능한 크기 < 1일 경우, 동적 크기 계산을 중단하고 기존 크기를 유지합니다.

  • 사용자가 스타 크기 행/열을 "hidden" 또는 "0*"로 설정한 경우, getColumnWidth 및 getRowHeight 메서드는 0을 반환합니다.

  • "abc" 등 잘못된 문자열로 설정된 경우, 기본값으로 처리됩니다.

  • 사용자가 워크시트를 확대/축소(zoom) 하면, 고정된 행/열은 비율대로 확대되고, 스타 크기 영역은 뷰포트를 채우도록 자동 확장됩니다.

  • 스타 크기 행/열이 변경되면, 도형, 차트, 주석, 플로팅 객체 등 바인딩된 객체들도 함께 위치가 조정됩니다.

참고: 워크시트에서 동적 열 크기 조정 기능을 사용할 때 다음과 같은 제한 사항을 반드시 유의해야 합니다:

  • 행 머리글(row header) 및 열 머리글(column header) 은 동적 크기 조정을 지원하지 않습니다.

  • Microsoft Excel은 동적 열 크기 조정을 지원하지 않으므로, Excel 파일을 가져오거나 내보낼 때 해당 기능이 적용되지 않습니다.

  • PDF로 인쇄하거나 Excel로 내보낼 때, 동적 크기가 아닌 화면에 보이던 기존 크기(view size) 기준으로 출력됩니다.

코드 예시

다음은 워크시트에서 동적 열 크기 조정을 설정하는 예제 코드입니다.

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

    // 활성화 시트 가져오기 
    var activeSheet = spread.getSheet(0);
    activeSheet.suspendPaint();
    var colHeader = GC.Spread.Sheets.SheetArea.colHeader;
    activeSheet.setRowCount(12);
    activeSheet.setColumnCount(5);

    // 동적 열 크기 설정
    activeSheet.setColumnWidth(0, "1.5*");
    activeSheet.setColumnWidth(1, "1.5*");
    activeSheet.setColumnWidth(3, "*");
    activeSheet.setColumnWidth(4, "*");
    // 행 높이 설정
    activeSheet.setRowHeight(0, 50, colHeader);
    for (var row = 0; row < 12; row++) {
        activeSheet.setRowHeight(row, "*");
        for (col = 0; col < 5; col++) {
            activeSheet.getCell(row, col)
                .cellPadding('0 0 0 10')
                .vAlign(GC.Spread.Sheets.VerticalAlign.center);
        }
    }
    activeSheet.setValue(0, 0, 'Company Name', colHeader);
    activeSheet.setValue(0, 1, 'City', colHeader);
    activeSheet.setValue(0, 2, 'State', colHeader);
    activeSheet.setValue(0, 3, 'Phone', colHeader);
    activeSheet.setValue(0, 4, 'Fax', colHeader);

    activeSheet.setArray(0, 0, [
        ["Super Mart of the West", "Bentonville", "Arkansas", "(800) 555-2797", "(800) 555-2171"],
        ["Electronics Depot", "Atlanta", "Georgia", "(800) 595-3232", "(800) 595-3231"],
        ["K&S Music", "Minneapolis", "Minnesota", "(612) 304-6073", "(612) 304-6074"],
        ["Tom's Club", "Issaquah", "Washington", "(800) 955-2292", "(800) 955-2293"],
        ["E-Mart", "Hoffman Estates", "Illinois", "(847) 286-2500", "(847) 286-2501"],
        ["Walters", "Deerfield", "Illinois", "(847) 940-2500", "(847) 940-2501"],
        ["StereoShack", "Fort Worth", "Texas", "(817) 820-0741", "(817) 820-0742"],
        ["Circuit Town", "Oak Brook", "Illinois", "(800) 955-2929", "(800) 955-9392"],
        ["Premier Buy", "Richfield", "Minnesota", "(612) 291-1000", "(612) 291-2001"],
        ["ElectrixMax", "Naperville", "Illinois", "(630) 438-7800", "(630) 438-7801"],
        ["Video Emporium", "Dallas", "Texas", "(214) 854-3000", "(214) 854-3001"],
        ["Screen Shop", "Mooresville", "North Carolina", "(800) 445-6937", "(800) 445-6938"]
    ]);

    spread.resumePaint();
});