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

일반적인 이벤트 시나리오

이 페이지에서는 실제 SpreadJS 애플리케이션에서 자주 사용되는 이벤트 기반 패턴을 소개합니다.

각 시나리오는 실무에서 발생하는 요구 사항에 초점을 맞추고, 어떤 이벤트를 사용해야 하는지와 그 이유를 설명합니다.

다른 시트로 전환 방지

요구 사항

저장되지 않은 변경 사항이 있는 경우와 같이 특정 조건이 충족될 때까지 사용자가 현재 시트를 벗어나지 못하도록 합니다.

사용 이벤트

ActiveSheetChanging

이유

활성 시트가 변경되기 전에 발생하며 취소할 수 있습니다.

spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanging, function (sender, args) {
    var hasUnsavedChanges = true;

    if (hasUnsavedChanges) {
        if (!confirm("저장되지 않은 변경 사항이 있습니다. 계속하시겠습니까?")) {
            args.cancel = true;
        }
    }
});

특정 셀 편집 방지

요구 사항

제한된 행 또는 열의 편집을 차단합니다.

사용 이벤트

EditStarting

이유

셀이 편집 모드로 진입하기 전에 발생합니다.

activeSheet.bind(GC.Spread.Sheets.Events.EditStarting, function (sender, args) {
    var restrictedColumn = 0;

    if (args.col === restrictedColumn) {
        args.cancel = true;
    }
});

커밋 전 입력값 검증

요구 사항

편집은 허용하되 값이 저장되기 전에 검증합니다.

사용 이벤트

EditEnding

이유

편집이 확정되기 전에 발생하며 편집기 값을 확인할 수 있습니다.

activeSheet.bind(GC.Spread.Sheets.Events.EditEnding, function (sender, args) {
    var value = args.editingText;

    if (isNaN(value)) {
        alert("숫자 값만 입력할 수 있습니다.");
        args.cancel = true;
    }
});

데이터 변경 추적

요구 사항

셀 변경 내용을 기록하거나 백엔드 시스템과 동기화합니다.

사용 이벤트

RangeChanged 또는 ValueChanged

이유

셀 데이터가 변경된 후 발생합니다.

activeSheet.bind(GC.Spread.Sheets.Events.RangeChanged, function (sender, args) {
    console.log("변경된 범위:",
        args.row,
        args.col,
        args.rowCount,
        args.colCount
    );
});

행 또는 열 크기 조정 차단

요구 사항

사용자가 행 높이 또는 열 너비를 변경하지 못하도록 합니다.

사용 이벤트

  • RowHeightChanging

  • ColumnWidthChanging

이유

크기 변경 전에 발생하며 취소를 지원합니다.

activeSheet.bind(GC.Spread.Sheets.Events.RowHeightChanging, function (sender, args) {
    args.cancel = true;
});

activeSheet.bind(GC.Spread.Sheets.Events.ColumnWidthChanging, function (sender, args) {
    args.cancel = true;
});

정렬 작업 제한

요구 사항

특정 열에 대한 정렬을 허용하지 않습니다.

사용 이벤트

RangeSorting

이유

자동 정렬이 수행되기 전에 발생합니다.

activeSheet.bind(GC.Spread.Sheets.Events.RangeSorting, function (sender, args) {
    var restrictedColumn = 2;

    if (args.col === restrictedColumn) {
        alert("이 열은 정렬할 수 없습니다.");
        args.cancel = true;
    }
});

도형 삭제 방지

요구 사항

시각적 요소가 삭제되지 않도록 보호합니다.

사용 이벤트

ShapeRemoving

activeSheet.bind(GC.Spread.Sheets.Events.ShapeRemoving, function (sender, args) {
    args.cancel = true;
});

끌어서 놓기 작업 가로채기

요구 사항

셀 이동을 위한 끌어서 놓기 작업을 제어하거나 차단합니다.

사용 이벤트

DragDropBlock

activeSheet.bind(GC.Spread.Sheets.Events.DragDropBlock, function (sender, args) {
    if (!args.copy) {
        args.cancel = true; // 복사는 허용, 이동은 차단
    }
});

잘라내기 작업 감지

요구 사항

잘라내기 작업 전에 사용자에게 경고를 표시합니다.

사용 이벤트

ClipboardPasting

spread.bind(GC.Spread.Sheets.Events.ClipboardPasting, function (sender, args) {
    if (args.action === GC.Spread.Sheets.ClipboardActionType.cut) {
        if (!confirm("잘라내기 작업입니다. 계속하시겠습니까?")) {
            args.cancel = true;
        }
    }
});

리포트 시트에서 비즈니스 규칙 적용

요구 사항

변경 사항을 제출하기 전에 데이터를 검증합니다.

사용 이벤트

  • ReportSheetDataChanging

  • ReportSheetRecordsSubmitting

report.bind(GC.Spread.Sheets.Events.ReportSheetDataChanging, function (sender, args) {
    if (args.newValue === null) {
        args.cancel = true;
    }
});