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

셀 작업하기

SpreadJS는 셀에 대해 다양한 작업을 수행할 수 있도록 지원합니다. 아래는 주요 기능에 대한 설명입니다:

셀 값 가져오기 및 설정



이 예제는 셀의 값을 가져오고 설정하는 방법을 보여줍니다.

Ask ChatGPT

$(document).ready(function ()
{
    var spread =
    new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
    var sheet = spread.getActiveSheet();
    sheet.getCell(0, 0).formatter("0.00_);(0.00)");
    sheet.getCell(1, 0).formatter("0.00_);(0.00)");
    sheet.getCell(0, 1).formatter("0.00_);(0.00)");
    sheet.getCell(1, 1).formatter("0.00_);(0.00)");
   
    // Text 속성 값 설정
    sheet.getCell(0, 0).text("10");
   
    // SetText 메서드 호출하여 값 설정
    sheet.setText(1, 0, "10");
   
    // 값(Value)을 직접 설정
    sheet.getCell(0, 1).value(10);
   
    // SetValue 메서드를 호출하여 값을 설정
    sheet.setValue(1, 1, 10);

    //셀 값 가져오기
    $("#button1").click(function()
     {
       alert("Obtaining cell values by referring to Text property: " +
       sheet.getCell(0, 0).text() + "\n" +
       "Obtaining cell values by calling GetText method: " + sheet.getText(1, 0) + "\n" +
       "Obtaining cell values by referring to Value property: " +
       sheet.getCell(0, 1).value() + "\n" +
       "Obtaining cell values by calling GetValue method: " + sheet.getValue(1, 1));
     });

});

셀 기본값 설정 및 가져오기

SpreadJS에서는 셀에 값이 없을 경우 기본적으로 빈 상태로 표시되며, 이런 상황을 제어하기 위해 셀의 기본값(Default Value)을 설정할 수 있습니다. 기본값으로 일반 값이나 수식을 설정할 수 있으며, 수식을 기본값으로 지정할 경우 일반 수식처럼 동작합니다. 기본값은 워크시트의 뷰포트 영역에서만 설정할 수 있으며, 전체 행 또는 열에는 설정할 수 없습니다.

기본값이 설정된 빈 셀에는 다음 조건이 적용됩니다:

  • 다시 계산 시, 해당 셀의 기본값 또는 기본 수식이 포함됩니다.

  • 편집 모드에서는 기본값 또는 기본 수식으로 계산된 값이 표시됩니다.

  • Excel로 내보낼 경우, 기본값은 셀 값으로 함께 내보내집니다.

  • 사용자가 셀 값을 변경해도, 기본값이 덮어쓰기되지는 않습니다.

다음 메서드를 통해 셀의 기본값을 설정하거나 가져올 수 있습니다:

  • GC.Spread.Sheets.CellRange 클래스의 defaultValue 메서드 사용.

    // defaultValue() 메서드를 사용하여 셀의 기본값 또는 수식을 설정하거나 가져옵니다.
   activeSheet.getCell(0, 0).defaultValue(20);
   console.log("DefaultValue of cell(0,0) using defaulValue method: " + activeSheet.getCell(0, 0).defaultValue());
   activeSheet.getCell(0, 1).defaultValue("=IF(A1>10, A1*3)");
   console.log("DefaultValue of cell(0,1) using defaulValue method: " + activeSheet.getCell(0, 1).defaultValue());

  • GC.Spread.Sheets.Worksheet 클래스의 getDefaultValue 와setDefaultValue메서드 사용.

    // setDefaultValue 또는 getDefaultValue() 메서드를 사용하여 셀의 기본값 또는 수식을 설정하거나 가져옵니다.
   activeSheet.setDefaultValue(0, 0, 20);
   activeSheet.setDefaultValue(1, 0, 40);
   console.log("DefaultValue of cell(0,0) using getDefaultValue method is: " + activeSheet.getDefaultValue(0, 0));
   activeSheet.setDefaultValue(2, 0, "=SUM(A1,A2)");
   console.log("DefaultValue of cell(2,0) using getDefaultValue method is: " + activeSheet.getDefaultValue(2, 0));

또한, 셀의 기본값을 복사하려면 CopyToOptions 열거형의 defaultValue 옵션을 사용할 수도 있습니다.

// CopyToOption 열거형을 사용하여 셀의 기본값 또는 수식을 복사합니다.
   activeSheet.getCell(0, 0).defaultValue("2048");
   activeSheet.copyTo(0, 0, 1, 1, 2, 2, GC.Spread.Sheets.CopyToOptions.defaultValue);
   activeSheet.getCell(0, 1).defaultValue("=A1 + 1000");
   activeSheet.copyTo(0, 1, 1, 1, 2, 2, GC.Spread.Sheets.CopyToOptions.defaultValue);

참고: SpreadJS는 셀의 기본값으로 수식을 설정할 때 동적 배열(Dynamic Arrays) 및 배열 수식(Array Formulas) 을 지원하지 않습니다. 이러한 경우에는 왼쪽 상단 셀 값만 표시됩니다.


디자이너 사용하기

SpreadJS 디자이너에서는 셀의 컨텍스트 메뉴에서 '기본값(Default Value)…' 옵션을 선택하여 셀의 기본값을 설정할 수 있습니다. 이 옵션을 선택하면 ‘기본값 대화 상자(Default Value Dialog)’ 가 열리고, 선택한 셀에 대한 기본값을 입력할 수 있습니다. 설정 후에는 대화 상자에서 해당 셀의 기본값을 확인할 수 있습니다.


아래 GIF는 디자이너를 사용해 기본값을 설정하는 과정을 보여줍니다.

SetDefaultCellValue


활성 셀 설정하기

이 예제에서는 활성 셀(active cell) 을 설정하는 방법을 보여줍니다.

$("#button1").click(function ()
{  
    // 셀 (3,3)을 활성 셀로 설정
     activeSheet.setActiveCell(3, 3);
 });


활성 셀의 위치 설정

Ask ChatGPT



이 예제는 활성 셀의 위치를 설정하는 방법을 보여줍니다.

$("#button1").click(function ()
{
    // 셀 (3,3)을 활성 셀로 설정
   sheet.setActiveCell(3, 3);
    
   // 활성 셀을 왼쪽 위에 표시
   sheet.showCell(3, 3,
    GC.Spread.Sheets.VerticalPosition.top,
    GC.Spread.Sheets.HorizontalPosition.left);
});


여러 셀 선택



이 예제는 여러 셀을 선택하는 방법을 보여줍니다.

$(document).ready(function ()
{
    var spread =
    new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
    var sheet = spread.getActiveSheet();
   
    // 다중 범위 선택 허용
    sheet.selectionPolicy(GC.Spread.Sheets.SelectionPolicy.MultiRange);
   
    // 2개의 다른 선택 범위 생성
    sheet.addSelection(0, 0, 2, 2);
    sheet.addSelection(3, 3, 2, 2);
});


선택된 셀 범위 가져오기

이 예제는 선택된 셀의 범위를 가져오는 방법을 보여줍니다.

window.onload = function()
{
   var spread =
   new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
   var activeSheet = spread.getActiveSheet();
   activeSheet.setRowCount(5);
   activeSheet.setColumnCount(5);
   $("#button1").click(function()
   {       
    // 선택된 셀 범위 가져오기
     var selectedRanges = spread.getActiveSheet().getSelections();
     for(var i = 0; i < selectedRanges.length; i++)
        {
             console.log("---------------------------");
             console.log("Using Range class");
             console.log("-------------------------");
             console.log("Selected top row index: " + selectedRanges[i].row);
             console.log("Number of selected rows: " + selectedRanges[i].rowCount);
             console.log("Selected first column index: " + selectedRanges[i].col);
             console.log("Number of selected columns: " + selectedRanges[i].colCount);
         }
   });
}


셀에 조건부 서식 설정하기

이 예제는 셀에 조건부 서식 스타일을 설정하는 방법을 보여줍니다.

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

    // 각각의 조건부 스타일 생성
    var styleBlue = new GC.Spread.Sheets.Style();
    var stylePink = new GC.Spread.Sheets.Style();
    var styleLime = new GC.Spread.Sheets.Style();
    var styleYellow = new GC.Spread.Sheets.Style();
    var styleEmpty = new GC.Spread.Sheets.Style();
    styleBlue.backColor = "blue";
    styleBlue.foreColor = "white";
    stylePink.backColor = "pink";
    styleLime.backColor = "lime";
    styleYellow.backColor = "yellow";
    styleEmpty.backColor = undefined;
    styleEmpty.foreColor = undefined;

    // 각각의 셀에 조건부 서식 설정
    activeSheet.conditionalFormats.addCellValueRule(
    GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.EqualsTo,
    0, undefined, styleEmpty,
    [new GC.Spread.Sheets.Range(1, 1, 1, 1)]);
    activeSheet.conditionalFormats.addCellValueRule(
    GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.LessThan,
    10,undefined,styleBlue,
    [new GC.Spread.Sheets.Range(1, 1, 1, 1)]);
    activeSheet.conditionalFormats.addCellValueRule(
    GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.Between,
    20,50,stylePink,
    [new GC.Spread.Sheets.Range(2, 1, 1, 1)]);
    activeSheet.conditionalFormats.addCellValueRule(
    GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.Between,
    50,80,styleLime,
    [new GC.Spread.Sheets.Range(3, 1, 1, 1)]);
    activeSheet.conditionalFormats.addCellValueRule(
    GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.GreaterThan,
    80, undefined, styleYellow,
    [new GC.Spread.Sheets.Range(4, 1, 1, 1)]);
    activeSheet.getCell(2, 1).value(25);
    activeSheet.getCell(3, 1).value(77);
    activeSheet.getCell(4, 1).value(88);
}


셀 위치 및 크기 가져오기

이 예제에서는 특정 셀의 위치와 크기를 가져옵니다.

spread.getActiveSheet().bind(GC.Spread.Sheets.Events.CellClick, function (e, info)
{
    if(info.sheetArea ===GC.Spread.Sheets.SheetArea.viewport)
    {
        console.log("Clicked cell index (" + info.row + "," + info.col + ")");

    /* 지정된 인덱스 위치에 존재하는 일반 셀의 좌표 정보를 가져옵니다 */
        var cellRect = spread.getActiveSheet().getCellRect(info.row, info.col);
        console.log("X coordinate:" + cellRect.x);
        console.log("Y coordinate:" + cellRect.y);
        console.log("Cell width:" + cellRect.width);
        console.log("Cell height:" + cellRect.height);
    }
});


셀 클릭으로부터 셀 인덱스 가져오기

셀을 클릭했을 때 해당 셀의 인덱스를 가져올 수 있습니다.

var spread = new GC.Spread.Sheets.Workbook($("#ss")[0]);
var activeSheet = spread.getActiveSheet();
$("#ss").click(function (e)
{
    
    /* 고정 행/열 또는 행/열 헤더가 아닌 일반 셀을 마우스로 클릭한 지점에서 셀 인덱스를 가져옵니다. */
     var offset = $("#ss").offset();
     var x = e.pageX - offset.left;
     var y = e.pageY - offset.top;
     var target = spread.getActiveSheet().hitTest(x, y);
     if(target &&
     (target.rowViewportIndex === 0 || target.rowViewportIndex === 1) &&
     (target.colViewportIndex === 0 || target.colViewportIndex === 1))
     {
         console.log("Row index of mouse-clicked cells: " + target.row);
         console.log("Column index of mouse-clicked cells: " + target.col);
     }
});