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

자주 사용하는 이벤트

다음 섹션에서는 SpreadJS에서 사용할 수 있는 다양한 이벤트에 대한 코드 샘플을 제공합니다.

셀 클릭

SpreadJS 워크시트에서 셀을 클릭할 때 발생하는 이벤트를 구성할 수 있습니다.

다음 코드 샘플은 CellClick 이벤트를 사용하는 방법을 보여줍니다.

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

var activeSheet = spread.getActiveSheet();
activeSheet.bind(GC.Spread.Sheets.Events.CellClick, 

    function (sender, args) 
    {
        if(args.sheetArea === GC.Spread.Sheets.SheetArea.colHeader)
        {
            console.log("열 머리글이 클릭되었습니다.");
        }
        if(args.sheetArea === GC.Spread.Sheets.SheetArea.rowHeader)
        {
            console.log("행 머리글이 클릭되었습니다.");
        }
        if(args.sheetArea === GC.Spread.Sheets.SheetArea.corner){
            console.log("모서리 머리글이 클릭되었습니다.");
        }
        console.log("클릭한 열 인덱스: " + args.col);
        console.log("클릭한 행 인덱스: " + args.row);
});

셀 더블 클릭

SpreadJS 워크시트에서 셀을 더블 클릭할 때 발생하는 이벤트를 구성할 수 있습니다.

다음 코드 샘플은 CellDoubleClick 이벤트를 사용하는 방법을 보여줍니다.

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

var activeSheet = spread.getActiveSheet();

activeSheet.bind(GC.Spread.Sheets.Events.CellDoubleClick, function (sender, args) 
{
    
    if(args.sheetArea === GC.Spread.Sheets.SheetArea.colHeader)
    {
        console.log("열 머리글이 더블 클릭되었습니다.");
    }
    if(args.sheetArea === GC.Spread.Sheets.SheetArea.rowHeader)
    {
        console.log("행 머리글이 더블 클릭되었습니다.");
    }
    if(args.sheetArea === GC.Spread.Sheets.SheetArea.corner)
    {
        console.log("모서리 머리글이 더블 클릭되었습니다.");
    }
    console.log("더블 클릭한 열 인덱스: " + args.col);
    console.log("더블 클릭한 행 인덱스: " + args.row);
});

셀 이동

셀을 이동할 때 이벤트를 사용할 수 있습니다.

다음 코드 샘플은 LeaveCell 이벤트를 사용하는 방법을 보여줍니다.

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

activeSheet.bind(GC.Spread.Sheets.Events.LeaveCell, function (sender, args) 
{
    console.log("이동 전 열 인덱스: " + args.col);
    console.log("이동 전 행 인덱스: " + args.row);    
});

편집 모드 시작 또는 종료

편집 모드가 시작되거나 종료될 때 이벤트를 사용할 수 있습니다.

다음 코드 샘플은 EditStarting와 EditEnded 이벤트를 사용하는 방법을 보여줍니다.

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

var activeSheet = spread.getActiveSheet();
activeSheet.bind(GC.Spread.Sheets.Events.EditStarting, function (sender, args) 
{  
    console.log("셀 편집 시작.");
});

activeSheet.bind(GC.Spread.Sheets.Events.EditEnded, function (sender, args) 
 {
    console.log("셀 편집 종료.");
 });

데이터 변경

셀 데이터가 변경될 때 이벤트를 사용할 수 있습니다.

다음 코드 샘플은 EditChange 이벤트를 사용하는 방법을 보여줍니다.

var spread = 
new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
{sheetCount:3});
var activeSheet = spread.getActiveSheet();
activeSheet.bind(GC.Spread.Sheets.Events.EditChange, function (sender, args) 
{
    console.log("셀 (" + args.row + ", " + args.col + ")의 데이터가 변경되었습니다.")
});

최상단 행 또는 최좌측 열 변경

스크롤하는 동안 상단 행(top row) 또는 좌측 열(left column)이 변경될 때 이벤트를 사용할 수 있습니다.

이 이벤트는 scrollByPixel이 true로 설정된 경우 oldOffset과 newOffset의 차이를 기준으로 스크롤 상태를 기록합니다. 여기서 offset은 topRow의 상단 또는 leftColumn의 하단에서 현재 스크롤 위치까지의 거리를 의미합니다.

다음 코드 샘플은 scrollByPixel이 true로 설정된 경우 TopRowChanged와 LeftColumnChanged 이벤트를 사용하는 방법을 보여줍니다.

var wb1 = new GC.Spread.Sheets.Workbook(document.getElementById("ss1"));
var wb2 = new GC.Spread.Sheets.Workbook(document.getElementById("ss2"));
wb1.options.scrollByPixel = true;
wb2.options.scrollByPixel = true;
wb1.bind(GC.Spread.Sheets.Events.TopRowChanged, (e, info) => { 
    wb2.getActiveSheet().showRow(info.newTopRow); 
    wb2.getActiveSheet().scroll(info.newOffset - info.oldOffset, 0);
});
wb1.bind(GC.Spread.Sheets.Events.LeftColumnChanged, (e, info) => {
   wb2.getActiveSheet().showColumn(info.newLeftCol);
   wb2.getActiveSheet().scroll(0, info.newOffset - info.oldOffset);
});

시트 탭 변경

시트 탭이 변경될 때 이벤트를 사용할 수 있습니다.

다음 코드 샘플은 탭 변경을 취소하는 방법을 보여줍니다.

var spread = 
new GC.Spread.Sheets.Workbook(document.getElementById("ss"),
{sheetCount:3});
spread.addSheet();
spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanging, 
function (sender, args) 
{
    // 시트 전환 취소
    args.cancel = true;
});

spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function (sender, args) 
{
    console.log("활성 시트가 전환되었습니다.");
});

셀 블록 드래그 앤 드롭

셀 블록을 드래그 앤 드롭할 때 이벤트를 사용할 수 있습니다.

다음 코드 샘플은 DragDropBlock 이벤트를 사용하는 방법을 보여줍니다.

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

var sheet = spread.getActiveSheet();
sheet.bind(GC.Spread.Sheets.Events.DragDropBlock, function (e, args) 
{
  console.log("시작 열:" + args.fromCol);
  console.log("시작 행:" + args.fromRow);
  console.log("도착 열:" + args.toCol);
  console.log("도착 행:" + args.toRow);
});

시트 변경

시트가 변경되기 전 또는 후에 이벤트를 구성할 수 있습니다.

SheetChanging 이벤트는 시트가 변경되기 전에 발생하며, SheetChanged 이벤트는 시트 변경 후에 발생합니다. 여기서 시트 변경에는 컨텍스트 메뉴를 사용하거나 시트 탭의 "+" 버튼을 클릭하여 시트를 삽입, 삭제, 숨기기 또는 숨김 해제가 포함됩니다.

다음 코드 샘플은 SheetChanged와 SheetChanging 이벤트를 사용하는 방법을 보여줍니다.

// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

// SheetChanged 이벤트 바인딩
spread.bind(GC.Spread.Sheets.Events.SheetChanged, function (sender, args) {
    console.log("변경 유형: " + args.propertyName + ", 시트 인덱스: " + args.sheetIndex);
});

// SheetChanging 이벤트 바인딩
spread.bind(GC.Spread.Sheets.Events.SheetChanging, function (sender, args) {
    console.log("변경 중 유형: " + args.propertyName + ", 시트 인덱스: " + args.sheetIndex);
});

셀 범위 변경

테이블 범위의 셀 범위가 변경될 때 코드를 사용할 수 있습니다.

다음 코드 샘플은 RangeChanged 이벤트를 사용하는 방법을 보여줍니다.

// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// 활성 시트 가져오기
var activeSheet = spread.getSheet(0);
// 데이터 추가
for (var col = 1; col < 6; col++) {
    for (var row = 2; row < 11; row++) {
        activeSheet.setValue(row, col, row + col);
    }
}
for (var col = 7; col < 12; col++) {
    for (var row = 2; row < 5; row++) {
        activeSheet.setValue(row, col, row + col);
    }
}
// 테이블 추가
activeSheet.tables.add("Table1", 1, 1, 10, 5, GC.Spread.Sheets.Tables.TableThemes.dark1);
activeSheet.tables.add("Table2", 1, 7, 4, 5, GC.Spread.Sheets.Tables.TableThemes.dark1);

// RangeChanged 이벤트 바인딩
activeSheet.bind(GC.Spread.Sheets.Events.RangeChanged, function (sender, args) {
    if (args.tableNames) {
        console.log("테이블에 대해 RangeChanged 이벤트 발생: " + args.tableNames);
    }
});

버튼 클릭

버튼, 체크박스, 하이퍼링크 셀에 대해 ButtonClicked 이벤트를 사용할 수 있습니다.

ButtonClicked 이벤트는 사용자가 셀 내 버튼, 체크박스, 하이퍼링크를 클릭할 때 발생합니다.

다음 코드 샘플은 버튼 셀을 클릭했을 때 메시지를 표시하는 방법을 보여줍니다.

var cellType = new GC.Spread.Sheets.CellTypes.Button();
cellType.buttonBackColor("#FFFF00");
cellType.text("이것은 버튼입니다");
activeSheet.setCellType(1,1,cellType);

spread.bind(GC.Spread.Sheets.Events.ButtonClicked, function (e, args)
{
   var sheet = args.sheet, row = args.row, col = args.col;
   var cellType = activeSheet.getCellType(row, col);
   if (cellType instanceof GC.Spread.Sheets.CellTypes.Button)
     {
        alert("버튼이 클릭되었습니다.");
     }
});