# 워크시트 작업

## Content

SpreadJS에서는 워크시트에서 다양한 작업을 수행하여 여러 가지 중요한 작업을 처리할 수 있습니다.

## 워크시트 추가

워크북에 워크시트를 추가하려면 [Workbook.addSheet](/spreadjs/api/v19/classes/GC.Spread.Sheets.Workbook#addSheet) 메서드를 사용합니다.

```javascript
$(document).ready(function ()
{
    // 시트의 수 3개로 설정
    var spread =
    new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
    {sheetCount:3});

   $("#button1").click(function()
   {
     // 새 시트 생성 및 2번째 위치에 추가
     var sheet = new GC.Spread.Sheets.Worksheet();
     sheet.name("The added sheet");
     spread.addSheet(1, sheet);
   });
}); 
```

## 워크시트 제거

워크북에서 워크시트를 제거하려면 [Workbook.removeSheet](/spreadjs/api/v19/classes/GC.Spread.Sheets.Workbook#removeSheet) 메서드를 사용합니다.

```javascript
$(document).ready(function ()
 {
    // 시트의 수 3개로 설정
    var spread =
    new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});

    $("#button1").click(function()
    {
     // 두번째 시트 삭제 
     spread.removeSheet(1);
    });
});
```

## 여러 워크시트 추가

[Workbook.setSheetCount](/spreadjs/api/v19/classes/GC.Spread.Sheets.Workbook#setSheetCount) 메서드를 사용하여 워크북에 추가할 시트 수를 설정할 수 있습니다.

```javascript
$(document).ready(function ()
{
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
    {sheetCount:3});

    // 시트의 수를 5개로 설정 
    spread.setSheetCount(5);
}); 
```

## 워크시트 이름 변경

[Worksheet.name](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#name) 메서드를 사용하여 워크시트 이름을 변경할 수 있습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/codesheet.png)

이 코드 예제는 시트 이름을 변경하고 시트 탭 색상을 설정하는 방법을 보여줍니다.

```javascript
$(document).ready(function ()
{
   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
   {sheetCount:3});
  
    // 시트의 수를 5개로 설정 
   spread.setSheetCount(5);
  
   // 시트 이름 변경
   spread.sheets[0].name("The first sheet");
   spread.sheets[1].name( "The second sheet");
  
   // 시트 탭 표시 색상과 같은 시트 정보 변경 
   spread.sheets[0].options.sheetTabColor = "LemonChiffon";
});
```

>type=warning
> **참고:** 워크북 내에서 **중복된 이름**이나 **특수 문자**를 사용하면 오류가 발생합니다.
> 런타임 중 오류 메시지를 확인하려면 `undefined`가 바인딩된 시트에서 처리하시기 바랍니다.

## 워크시트 이동

시트 인덱스를 변경하고 탭 스트립에서 시트 순서를 바꾸려면 [Workbook.changeSheetIndex](/spreadjs/api/v19/classes/GC.Spread.Sheets.Workbook#changeSheetIndex) 메서드를 사용합니다. 이 메서드는 시트 이름과 대상 인덱스 번호를 매개변수로 받습니다.

또는, [moveSheet](/spreadjs/api/v19/modules/GC.Spread.Sheets.Commands#moveSheet) 명령을 사용하여 시트를 이동할 수도 있습니다.

다음 예제는 `"Sheet2"`의 시트 인덱스를 변경하고, 새 인덱스를 사용하는 시트의 셀에 텍스트를 추가하는 방법을 보여줍니다.

```javascript
window.onload = function ()
{
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount:5});

    spread.changeSheetIndex("Sheet2", 3);

    spread.sheets[3].getCell(0, 0).text("changeSheetIndex successful");

    // 또는 명령어를 사용하여 시트 인덱스를 변경
    // spread.commandManager().execute({cmd: "moveSheet", sheetName: "Sheet2", targetIndex: 3});

};
```

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/move-sheet.png)

## 워크시트 복사

[copySheet](/spreadjs/api/v19/modules/GC.Spread.Sheets.Commands#copySheet) 명령을 사용하면 시트를 새 워크시트로 복사할 수 있습니다. 이 명령은 시트 이름, 대상 인덱스, 새 시트 이름과 같은 매개변수를 받습니다.

또한 복사된 시트에 데이터 소스 바인딩을 포함할지 여부도 지정할 수 있으며, 기본값은 `true`입니다.

복사된 시트는 원본 시트와 **모양이 동일**하며,내용 중 현재 시트를 참조하는 부분은 적절히 수정되고, 다른 시트를 참조하는 부분은 그대로 유지됩니다.

| **Original Sheet** | **Copied Sheet** |
| -------------- | ------------ |
| ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/origSheet-func.png) | ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/copySheet-func.png) |

복사된 시트에는 원본 시트에 정의된 **사용자 지정 이름(custom names)**도 함께 복사됩니다.

| **Original Sheet** | **Copied Sheet** |
| -------------- | ------------ |
| ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/origSheet-customName.png) | ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/copySheet-customName.png) |

또한 시트 복사 시, 표(tables), 슬라이서(slicers), 차트(charts), 도형(shapes) 등과 같은 **전역 고유 요소 이름**도 모두 적절히 수정됩니다.

| **Original Sheet** | **Copied Sheet** |
| -------------- | ------------ |
| ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/origSheet-table.png) | ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/copySheet-table.png) |

아래 예제는 `"Sheet1"`을 새 워크시트로 복사하고, 수식 내 기존 시트 참조 및 테이블 이름을 수정하는 동작을 보여줍니다.

```javascript
window.onload = function () {
    
   // 워크북과 워크시트 구성
   var spread = new GC.Spread.Sheets.Workbook("ss", {sheetCount:5});
   var activeSheet = spread.getActiveSheet();
   
   var tableData = {
       sales: [
           { orderDate: '1/6/2013', item: 'Pencil', units: 95, cost: 1.99},
           { orderDate: '4/1/2013', item: 'Binder', units: 60, cost: 4.99},
           { orderDate: '6/8/2013', item: 'Pen Set', units: 16, cost: 15.99},
           { orderDate: '8/1/2013', item: 'Pencil', units: 20, cost: 24.99},
           { orderDate: '10/8/2013', item: 'Binder', units: 31, cost: 16.99}
       ]
   };

   activeSheet.getCell(7,2).text("Total");
   activeSheet.getCell(7,3).formula("=SUM(Sheet1!D2:D6)");

   var table = activeSheet.tables.add('Table1', 0, 0, 7, 4);
   var tableColumn1 = new GC.Spread.Sheets.Tables.TableColumn(1, "orderDate", "Order Date", "yyyy-mm-dd");
   var tableColumn2 = new GC.Spread.Sheets.Tables.TableColumn(2, "item", "Item");
   var tableColumn3 = new GC.Spread.Sheets.Tables.TableColumn(3, "units", "Units");
   var tableColumn4 = new GC.Spread.Sheets.Tables.TableColumn(4, "cost", "Cost");
   table.autoGenerateColumns(false);
   table.bind([tableColumn1, tableColumn2, tableColumn3, tableColumn4], 'sales', tableData);
   activeSheet.autoFitColumn(0);

   spread.commandManager().execute({cmd: "copySheet", sheetName: "Sheet1", targetIndex: 3, newName: "Sheet1 (2)", includeBindingSource: true});

}
```

## 워크시트 숨기기 또는 다시 표시하기

SpreadJS에서는 시트 탭의 컨텍스트 메뉴를 통해 워크시트를 숨기거나 다시 표시할 수 있습니다.

시트 탭을 마우스 오른쪽 버튼으로 클릭하고, **“숨기기(Hide)”** 또는 **“다시 표시(Unhide…)”** 옵션을 선택하여 작업을 수행할 수 있습니다.

[Worksheet.visible](/spreadjs/api/v19/classes/GC.Spread.Sheets.Worksheet#visible) 클래스 메서드는 런타임 중 워크시트의 표시 상태를 설정하는 데 사용할 수 있습니다. 이 메서드는 워크시트를 표시할지 여부를 결정하기 위해 boolean 값을 받습니다. 또한 **Worksheet.visible** 메서드에 [SheetTabVisible](/spreadjs/api/v19/enums/GC.Spread.Sheets.SheetTabVisible) 열거형 값을 매개변수로 사용하여 워크시트의 표시 상태를 설정할 수도 있습니다.

```js
// 워크북과 워크시트 구성 
var spread = new GC.Spread.Sheets.Workbook("ss", { sheetCount: 5 });

// "Sheet2" 숨기기
spread.getSheet(1).visible(false);

// "Sheet4" 숨기기
spread.getSheet(3).visible(GC.Spread.Sheets.SheetTabVisible.hidden);
// or
// spread.getSheet(3).visible(0);
```

**SheetTabVisible.veryHidden** 열거형 옵션을 사용하면 애플리케이션에서 시트를 Spread 컴포넌트 내에서 숨길 수 있습니다. 이는 시트 탭 컨텍스트 메뉴 항목인 "다시 표시(Unhide...)"를 사용하여 UI를 통해 시트를 표시할 수 없음을 의미합니다.

"very hidden" 상태의 시트는 따라서 **Worksheet.visible** 메서드를 사용해야만 표시할 수 있습니다.

```javascript
// Very hidden "Sheet3"
spread.getSheet(2).visible(GC.Spread.Sheets.SheetTabVisible.veryHidden);
```

> **참고 :** 사용자들은 "very hidden" 상태의 시트에 대해 다음 작업을 수행할 수 없습니다.
>
> * 활성 워크시트로 설정할 수 없습니다.
> * 워크시트를 선택할 수 없습니다.
> * 시트의 내용을 찾기 또는 바꾸기를 통해 검색할 수 없습니다.
> * GoTo(이동) 작업의 영향을 받지 않습니다.
> * 하이퍼링크로 시트의 내용을 참조할 수 없습니다.
> * 워크시트를 인쇄할 수 없습니다.

## 기본 스타일 설정

다음 예제 코드를 사용하여 기본 시트 스타일을 설정할 수 있습니다:
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/codedefault.png)

```javascript
$(document).ready(function ()
{
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
{sheetCount:3});
var activeSheet = spread.getActiveSheet();

// 기본 스타일 설정
activeSheet.setRowCount(5, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setColumnCount(5, GC.Spread.Sheets.SheetArea.viewport);

// 기본 스타일 설정 
var defaultStyle = new GC.Spread.Sheets.Style();
defaultStyle.backColor = "LemonChiffon";
defaultStyle.foreColor = "Red";
defaultStyle.formatter = "0.00";
defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
defaultStyle.borderLeft =
new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
defaultStyle.borderTop =
new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
defaultStyle.borderRight =
new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
defaultStyle.borderBottom =
new GC.Spread.Sheets.LineBorder("Green",GC.Spread.Sheets.LineStyle.medium);
activeSheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.viewport);
var rowCount = activeSheet.getRowCount();
var colCount = activeSheet.getColumnCount();
for(var i = 0; i < rowCount; i++)
{
for(var j = 0; j < colCount; j++)
{
activeSheet.setValue(i, j, i+j, GC.Spread.Sheets.SheetArea.viewport);
}
}
});
```

## 폰트 스타일 설정

시트의 글꼴 스타일은 `font` 속성을 사용하여 설정할 수 있으며, 이 속성에는 글꼴 스타일, 글꼴 굵기, 글꼴 크기, 글꼴 패밀리 값이 포함됩니다.
또는 `fontStyle`, `fontWeight`, `fontSize`, `fontFamily`와 같은 개별 글꼴 속성을 사용하여 각각의 속성을 별도로 설정할 수도 있습니다.
아래 이미지는 `font` 속성과 개별 글꼴 속성을 각각 사용하는 방법을 보여줍니다.
![font-style](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/font-style.7e4478.png)

다음 예제 코드는 셀 (2,0), (4,0), (6,0)에 `font` 속성을 적용하였고, 나머지 셀에는 개별 글꼴 속성을 적용한 것입니다.

```javascript
// Font
activeSheet.getCell(2, 0).font('italic normal 12px Mangal');
activeSheet.getCell(4, 0).font('normal bold 15px Arial Black');
activeSheet.getCell(6, 0).font('normal normal 18px Georgia');

// FontFamily
activeSheet.getCell(2, 1).fontFamily('Mangal');
activeSheet.getCell(4, 1).fontFamily('Arial Black');
activeSheet.getCell(6, 1).fontFamily('Georgia');

// FontSize
activeSheet.getCell(2, 2).fontSize('12px');
activeSheet.getCell(4, 2).fontSize('20px');
activeSheet.getCell(6, 2).fontSize('28px');

// FontWeight
activeSheet.getCell(2, 3).fontWeight('bold');
activeSheet.getCell(4, 3).fontWeight('normal');

// Italic
activeSheet.getCell(2, 4).fontStyle('italic');
activeSheet.getCell(4, 4).fontStyle('normal');
```

## 눈금선 모양 변경

워크시트 옵션의 gridline 설정을 통해 눈금선의 색상을 변경하거나 숨길 수 있습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/codegrid.png)

다음 예제 코드는 눈금선 색상을 설정하고 수평 눈금선을 숨깁니다.

```javascript
$(document).ready(function ()
{
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
    {sheetCount:3});
    var sheet = spread.getActiveSheet();
  
    // 수평 그리드 눈금선 숨김
    sheet.options.gridline = {color:"red", showVerticalGridline: true,
    showHorizontalGridline: false};
    spread.invalidateLayout();
    spread.repaint();
});
```