워크시트 작업

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

워크시트 추가

워크북에 워크시트를 추가하려면 Workbook.addSheet 메서드를 사용합니다.

$(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 메서드를 사용합니다.

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

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

여러 워크시트 추가

Workbook.setSheetCount 메서드를 사용하여 워크북에 추가할 시트 수를 설정할 수 있습니다.

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

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

워크시트 이름 변경

Worksheet.name 메서드를 사용하여 워크시트 이름을 변경할 수 있습니다.

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

$(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";
});

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

워크시트 이동

시트 인덱스를 변경하고 탭 스트립에서 시트 순서를 바꾸려면 Workbook.changeSheetIndex 메서드를 사용합니다. 이 메서드는 시트 이름과 대상 인덱스 번호를 매개변수로 받습니다.

또는, moveSheet 명령을 사용하여 시트를 이동할 수도 있습니다.

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

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

};

워크시트 복사

copySheet 명령을 사용하면 시트를 새 워크시트로 복사할 수 있습니다. 이 명령은 시트 이름, 대상 인덱스, 새 시트 이름과 같은 매개변수를 받습니다.

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

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

Original Sheet	Copied Sheet

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

Original Sheet	Copied Sheet

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

Original Sheet	Copied Sheet

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

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 클래스 메서드는 런타임 중 워크시트의 표시 상태를 설정하는 데 사용할 수 있습니다. 이 메서드는 워크시트를 표시할지 여부를 결정하기 위해 boolean 값을 받습니다. 또한 Worksheet.visible 메서드에 SheetTabVisible 열거형 값을 매개변수로 사용하여 워크시트의 표시 상태를 설정할 수도 있습니다.

// 워크북과 워크시트 구성 
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 메서드를 사용해야만 표시할 수 있습니다.

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

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

기본 스타일 설정

다음 예제 코드를 사용하여 기본 시트 스타일을 설정할 수 있습니다:

$(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

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

// 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 설정을 통해 눈금선의 색상을 변경하거나 숨길 수 있습니다.

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

$(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();
});