자주 사용하는 이벤트

다음 섹션에서는 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 + ")의 데이터가 변경되었습니다.")
});

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

스크롤 시 최상단 행 또는 최좌측 열이 변경될 때 이벤트를 사용할 수 있습니다.

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

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
spread.addSheet();
var sheet1 = spread.getSheet(0),
    sheet2 = spread.getSheet(1);
sheet1.bind(GC.Spread.Sheets.Events.TopRowChanged, function (sender, args) 
{
  /* sheet1의 표시된 최상단 행을 sheet2에 설정 
   (수직 스크롤 동기화) */

  sheet2.showRow(args.newTopRow, GC.Spread.Sheets.VerticalPosition.top);
});

sheet1.bind(GC.Spread.Sheets.Events.LeftColumnChanged, function (sender, args) 
{
 /* sheet1의 표시된 최좌측 열을 sheet2에 설정 
  (수평 스크롤 동기화) */
sheet2.showColumn(args.newLeftCol, GC.Spread.Sheets.HorizontalPosition.left);
});

시트 탭 변경

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

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

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("버튼이 클릭되었습니다.");
     }
});