# 행 및 열 작업하기

## Content

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

### **행 및 열 추가**

[addRows](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#addrows) 및 [addColumns](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#addcolumns) 메서드를 사용하여 행과 열을 추가할 수 있습니다.
이 메서드는 **추가할 행 또는 열의 인덱스**, 그리고 **추가할 수량**을 매개변수로 받습니다.
![Add rows and columns in SpreadJS](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/rowcol-add.25fd84.gif)

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

```javascript
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](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#deleterows) 및 [deleteColumns](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#deletecolumns) 메서드를 사용하여 행과 열을 삭제할 수 있습니다.
이 메서드는 **삭제할 행 또는 열의 인덱스**, 그리고 **삭제할 개수**를 매개변수로 받습니다.
![Delete rows and columns in SpreadJS](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/rowcol-delete.5435d8.gif)

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

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

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

### 

### 행 및 열 개수 설정

[setRowCount](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#setrowcount) 및 [setColumnCount](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#setcolumncount) 메서드를 사용하여 시트에 표시할 행과 열의 개수를 설정할 수 있습니다.
이 메서드는 **행 또는 열의 개수**, 그리고 (선택적으로) **시트 영역**을 매개변수로 받습니다.
![Set row and column count in SpreadJS](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/rowcol-setcount.85edfe.png)

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

```javascript
// 워크북과 워크시트 구성 
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 메서드에서 사용하는 코드 예제입니다.

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

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

### 

### **행 높이 및 열 너비 설정**

워크시트에서 [setRowHeight](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#setrowheight) 및 [setColumnWidth](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#setcolumnwidth) 메서드를 사용하여 행의 높이와 열의 너비를 조정할 수 있습니다.
이 메서드는 **행/열 인덱스**, **픽셀 단위의 값**, 그리고 **시트 영역**을 매개변수로 받습니다.

![Set row height and column width in SpreadJS](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/rowcol-setsize.f998f1.png)

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

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

### 행 및 열 선택/선택 해제

[addSelection](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#addselection) 메서드를 사용하면 셀 하나 또는 셀 범위를 선택 영역에 추가할 수 있습니다. 이 메서드는 **첫 번째 셀의 행 및 열 인덱스**, 그리고 **추가할 행과 열의 개수**를 매개변수로 받습니다.
마찬가지로, [clearSelection](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#clearselection) 메서드를 사용하면 워크시트에서 선택된 영역을 모두 해제할 수 있습니다.
![Select and deselect SpreadJS rows and columns](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/rowcol-select.ce0ea9.gif)

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

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

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

### 

### 최상단 행 및 열 설정

워크시트에서 특정 행이나 열이 화면에 표시되도록 하거나, 해당 위치로 뷰를 이동시키려면 [showRow](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#showrow) 및 [showColumn](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#showcolumn) 메서드를 사용할 수 있습니다.
이 메서드는 **행 또는 열 인덱스**, 그리고 VerticalPosition 또는 HorizontalPosition 열거형에 따른 **세로/가로 위치**를 매개변수로 받습니다.
![Display specific row or column in SpreadJS](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/rowcol-show.c7afb5.gif)

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

```javascript
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](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#getviewporttoprow) | 뷰포트에서 가장 위에 있는 행의 인덱스를 가져옵니다. |
| [getViewportBottomRow](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#getviewportbottomrow) | 뷰포트에서 가장 아래에 있는 행의 인덱스를 가져옵니다. |
| [getViewportLeftColumn](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#getviewportleftcolumn) | 뷰포트에서 가장 왼쪽에 있는 열의 인덱스를 가져옵니다. |
| [getViewportRightColumn](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#getviewportrightcolumn) | 뷰포트에서 가장 오른쪽에 있는 열의 인덱스를 가져옵니다. |

![Get index of displayed cell in SpreadJS](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/rowcol-getindex.8e14d9.gif)

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

```javascript
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);
}
```