행 및 열 작업하기

SpreadJS에서는 행 및 열에 대해 다양한 작업을 수행할 수 있습니다. 아래는 관련 기능에 대한 설명입니다:

행 및 열 추가

addRows 및 addColumns 메서드를 사용하여 행과 열을 추가할 수 있습니다.

이 메서드는 추가할 행 또는 열의 인덱스, 그리고 추가할 수량을 매개변수로 받습니다.

Add rows and columns in SpreadJS

다음은 행과 열을 추가하는 방법을 보여주는 코드 예제입니다.

function AddNewRow() {
    // 2행 위치에 행 하나를 추가  
    sheet.addRows(1, 1);
    sheet.setValue(1, 0, "Added row");
};

function AddNewCol() {
    // 2열 위치에 열 하나를 추가  
    sheet.addColumns(1, 1);
    sheet.setValue(0, 1, "Added column");
};

행 및 열 삭제

deleteRows 및 deleteColumns 메서드를 사용하여 행과 열을 삭제할 수 있습니다.

이 메서드는 삭제할 행 또는 열의 인덱스, 그리고 삭제할 개수를 매개변수로 받습니다.

Delete rows and columns in SpreadJS

다음은 행과 열을 삭제하는 방법을 보여주는 코드 예제입니다.

Ask ChatGPT

function DeleteRow() {
    // 2번째  삭제 
    sheet.deleteRows(1, 1);
}

function DeleteCol() {
    // 2번째 열 삭제
    sheet.deleteColumns(1, 1);                
}

행 및 열 개수 설정

setRowCount 및 setColumnCount 메서드를 사용하여 시트에 표시할 행과 열의 개수를 설정할 수 있습니다.

이 메서드는 행 또는 열의 개수, 그리고 (선택적으로) 시트 영역을 매개변수로 받습니다.

Set row and column count in SpreadJS

다음은 워크시트에서 행과 열의 개수를 각각 3으로 설정하는 코드 예제입니다.

Ask ChatGPT

// 워크북과 워크시트 구성 
spread = new GC.Spread.Sheets.Workbook("ss");
sheet = spread.getActiveSheet();
         
// 행과 열의 개수를 3으로 설정
sheet.setRowCount(3, GC.Spread.Sheets.SheetArea.viewport);
sheet.setColumnCount(3, GC.Spread.Sheets.SheetArea.viewport);

setRowCount/setColumnCount 메서드를 사용할 때, 지정한 개수(count 매개변수)가 기존 개수보다 작으면 행/열에 데이터나 수식 등이 포함되어 있어도 해당 행/열은 삭제됩니다.

하지만 UsedRangeType 열거형 옵션을 사용하면 행/열이 삭제되지 않도록 방지할 수 있습니다.

다음은 UsedRangeType 열거형을 setRowCount 메서드에서 사용하는 코드 예제입니다.

sheet.setRowCount(5, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.UsedRangeType.span);

참고: 새로운 행/열의 개수가 기존보다 작을 때에만 행/열 삭제를 방지하는 것이 의미가 있습니다.

행 높이 및 열 너비 설정

워크시트에서 setRowHeight 및 setColumnWidth 메서드를 사용하여 행의 높이와 열의 너비를 조정할 수 있습니다.

이 메서드는 행/열 인덱스, 픽셀 단위의 값, 그리고 시트 영역을 매개변수로 받습니다.

Set row height and column width in SpreadJS

다음은 워크시트에서 행 높이를 90px, 열 너비를 120px로 설정하는 코드 예제입니다.

// 두 번째 행의 높이 변경
sheet.setRowHeight(1, 90.0,GC.Spread.Sheets.SheetArea.viewport);
   
// 두 번째 열의 너비 변경
sheet.setColumnWidth(1, 120.0,GC.Spread.Sheets.SheetArea.viewport);

행 및 열 선택/선택 해제

addSelection 메서드를 사용하면 셀 하나 또는 셀 범위를 선택 영역에 추가할 수 있습니다. 이 메서드는 첫 번째 셀의 행 및 열 인덱스, 그리고 추가할 행과 열의 개수를 매개변수로 받습니다.

마찬가지로, clearSelection 메서드를 사용하면 워크시트에서 선택된 영역을 모두 해제할 수 있습니다.

Select and deselect SpreadJS rows and columns

다음은 워크시트에서 셀을 선택하거나 선택 해제하는 방법을 보여주는 코드 예제입니다.

function AddSelection() {
    //  4번째 전체 행 선택
    sheet.addSelection(3, -1, 1, -1);
}

function ClearSelection() {
    // 시트 선택 해제
    sheet.clearSelection();
}

최상단 행 및 열 설정

워크시트에서 특정 행이나 열이 화면에 표시되도록 하거나, 해당 위치로 뷰를 이동시키려면 showRow 및 showColumn 메서드를 사용할 수 있습니다.

이 메서드는 행 또는 열 인덱스, 그리고 VerticalPosition 또는 HorizontalPosition 열거형에 따른 세로/가로 위치를 매개변수로 받습니다.

Display specific row or column in SpreadJS

다음은 워크시트에서 특정 행 또는 열로 뷰를 이동하는 코드 예제입니다.

function ShowRow() {
    // 10번째 행 표시
    sheet.showRow(9, GC.Spread.Sheets.VerticalPosition.top);
};

function ShowCol() {
    // J열 표시 
    sheet.showColumn(9, GC.Spread.Sheets.HorizontalPosition.left);
};

표시된 셀의 인덱스 가져오기

다음의 getViewport 계열 메서드를 사용하면 현재 뷰포트(viewport)에 표시되고 있는 셀의 인덱스를 확인할 수 있습니다.

메서드	설
getViewportTopRow	뷰포트에서 가장 위에 있는 행의 인덱스를 가져옵니다.
getViewportBottomRow	뷰포트에서 가장 아래에 있는 행의 인덱스를 가져옵니다.
getViewportLeftColumn	뷰포트에서 가장 왼쪽에 있는 열의 인덱스를 가져옵니다.
getViewportRightColumn	뷰포트에서 가장 오른쪽에 있는 열의 인덱스를 가져옵니다.

Get index of displayed cell in SpreadJS

다음은 워크시트에서 행 또는 열의 위치에 따라 셀 인덱스를 가져오는 코드 예제입니다.

function GetCellIndex() {
    // 최상단 행(또는 열)의 인덱스를 가져오기ㅣ
    var topRow = sheet.getViewportTopRow(1);
    var leftCol = sheet.getViewportLeftColumn(1);
    alert("Index of top row being displayed: " + topRow + "\n" + "Index of first column being displayed: " + leftCol);
}