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

셀 상태

SpreadJS는 셀 상태가 edit, hover, active, select 등 특정 상태일 때 사용자 정의 셀 스타일을 구성할 수 있도록 지원합니다. 이 기능은 입력 폼 컨트롤, 고급 구조화된 폼, 그리고 현재 셀 상태에 따라 스타일을 지정해야 하는 다양한 인터랙티브 폼을 스프레드시트 내에서 만들 때 유용합니다.

셀 상태(Cell States)는 셀이 사용자로부터 어떤 동작을 받을 때 어떻게 반응할지를 나타냅니다. 일반적으로 셀 상태는 스타일의 일부이며, 사용자는 다양한 셀 기능을 선택적으로 쉽게 적용할 수 있도록 사용자 정의 스타일을 생성할 수 있습니다. 셀 상태를 구현함으로써, 사용자는 스프레드시트 기반의 폼 및 인터랙티브 대시보드를 위한 현대적인 사용자 인터페이스를 만들 수 있습니다. 또한 선택/활성 셀에 대해 활성 행과 열을 강조하거나, 실시간 애플리케이션에서 작동하도록 구성할 수 있습니다. 나아가, 유효하지 않은 수식 문자열을 가진 셀도 표시할 수 있습니다.

예시 - 아래 스크린샷은 사용자가 셀 위에 마우스를 올리거나, 셀을 선택하거나, 셀 상태를 변경했을 때 셀 스타일이 달라지는 모습을 보여줍니다. 이 예제에서는 마우스를 올리면 셀의 배경색이 분홍색으로, 전경색이 빨간색으로 바뀌고, 셀을 선택하면 노란색으로, 셀 상태가 dirty 상태일 때는 배경색이 파란색, 전경색이 빨간색으로 변경됩니다.


셀 상태 유형

스프레드시트에서 다양한 셀 상태를 다룰 수 있도록 CellStatesType 열거형이 제공되며, 아래 표와 같이 설명됩니다:

열거형 및 값

설명

hover = 0x01

마우스가 셀 위에 있을 때 지정된 작업을 수행합니다.

invalid = 0x02

데이터 유효성 검사의 조건 평가가 실패할 경우 셀 상태를 invalid로 설정합니다.

readonly = 0x04

보호된 워크시트에서 셀을 잠급니다.

edit = 0x08

셀이 편집 중일 때 지정된 작업을 수행합니다.

active = 0x10

셀이 포커스를 받을 때 지정된 작업을 수행합니다.

selected = 0x20

셀이 워크시트의 선택된 범위에 포함될 때 지정된 작업을 수행합니다.

dirty = 0x40

셀 값 또는 참조 셀 값이 변경될 경우 셀 상태를 dirty로 설정하여 시트 데이터 변경을 쉽게 추적할 수 있도록 합니다.

invalidFormula = 0x80

유효하지 않은 수식 문자열을 가진 셀을 표시합니다.

우선순위

워크시트에서 다양한 셀 상태에 대해 서로 다른 셀 스타일을 구성할 때는 아래와 같은 우선순위가 적용됩니다:

edit > hover > active > selected > invalid formula > dirty > invalid > read-only

기본(normal) 상태의 셀은 가장 낮은 우선순위를 가지며, 편집(edit) 모드의 셀이 가장 높은 우선순위를 가집니다.

만약 두 개의 셀 상태 스타일이 서로 겹치는 범위에 설정되어 있다면, 가장 마지막에 설정된 스타일이 더 높은 우선순위를 가집니다.

다음 코드 샘플은 사용자가 셀 위에 마우스를 올리거나 셀을 선택했을 때 각각 다른 스타일을 적용하는 방법을 보여줍니다.

// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// 활성화 시트 가져오기
var activeSheet = spread.getSheet(0);
// 스프레드시트에 데이터 추가
activeSheet.setValue(0, 1, "Y-2015");
activeSheet.setValue(0, 2, "Y-2016");
activeSheet.setValue(0, 3, "Y-2017");
activeSheet.setValue(0, 4, "Y-2018");
activeSheet.setValue(0, 5, "Y-2019");
activeSheet.setValue(1, 0, "Gradlco");
activeSheet.setValue(2, 0, "Saagiate");
activeSheet.setValue(3, 0, "Inferno");
activeSheet.setColumnWidth(0, 120);

// HoverStyle 생성
var hoverStyle = new GC.Spread.Sheets.Style();
hoverStyle.backColor = "pink";
hoverStyle.foreColor = "red";

// SelectStyle 생성
var selectStyle = new GC.Spread.Sheets.Style();
selectStyle.backColor = "yellow";
selectStyle.foreColor = "red";

// DirtyStyle 생성
var dirtyStyle = new GC.Spread.Sheets.Style();
dirtyStyle.backColor = 'lightblue';
dirtyStyle.foreColor = 'red';

// 셀 범위 A1:J10 접근
var range = new GC.Spread.Sheets.Range(0, 0, 10, 10);

// 다른 CellStatesType 스타일 적용
activeSheet.cellStates.add(range, GC.Spread.Sheets.CellStatesType.dirty, dirtyStyle);
activeSheet.cellStates.add(range, GC.Spread.Sheets.CellStatesType.selected, selectStyle);
activeSheet.cellStates.add(range, GC.Spread.Sheets.CellStatesType.hover, hoverStyle);