체크박스 셀

SpreadJS 체크박스 셀 타입은 워크시트 내에서 이진 상태 또는 3상태 모드를 전환할 수 있는 대화형 셀 내장 컨트롤입니다.

이전 버전과의 호환성을 위해 기존 체크박스 모드를 유지하면서 Excel과 호환되는 모던 모드를 제공합니다.

• checkbox – 클래식 사각형 체크박스(기본값)

• modern – Excel과 호환되는 둥근 스타일

• toggle – 스위치 스타일 토글 단추

다음 기능도 지원합니다.

• 구성 가능한 상호 작용 동작

• 텍스트 줄 바꿈 및 맞춤 제어

• Excel 가져오기 및 내보내기 호환성

표시 모드

mode 속성은 체크박스가 렌더링되고 시각적으로 동작하는 방식을 정의합니다.

cellType.mode(value);

모드 비교

토글 모드 구성

토글 모드는 toggleOptions를 통해 추가적인 모양 구성을 제공합니다.

• width / height

• autoSize

• sliderColorOn, sliderColorOff

• trackColorOn, trackColorOff

• animationDuration

• sliderMargin

• trackRadius

autoSize: false이고 textAlign: inside인 경우 autoFitWidth와 autoFitHeight는 텍스트 오버플로를 무시하고 토글 단추 크기만 고려합니다.

사용 예제

클래식 체크박스 모드(기본값)

var cellType = new GC.Spread.Sheets.CellTypes.CheckBox();
cellType.caption("caption");
cellType.textTrue("True");
cellType.textFalse("False");
cellType.textIndeterminate("Indeterminate");
cellType.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.bottom);
cellType.isThreeState(true);
cellType.boxSize(20);

activeSheet.getCell(1, 1).cellType(cellType);

모던 모드

var cellType = new GC.Spread.Sheets.CellTypes.CheckBox();
cellType.caption("Modern Checkbox");
cellType.mode("modern");
activeSheet.getCell(2, 1).cellType(cellType);

토글 모드

const spread = new GC.Spread.Sheets.Workbook();
const sheet = spread.getActiveSheet();
const cellType = new GC.Spread.Sheets.CellTypes.CheckBox();

cellType.textTrue('ON');
cellType.textFalse('OFF');
cellType.mode('toggle');
cellType.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);

cellType.toggleOptions({
  width: 65,
  height: 30,
  sliderMargin: 2,
  trackColorOn: '#8cbae8',
  trackColorOff: '#9e9e9e',
  sliderColorOn: '#1565c0',
  sliderColorOff: '#ffffff',
});

sheet.setCellType(0, 0, cellType);

상호 작용 모델

적중 테스트(hitTestMode)

셀에서 마우스 클릭에 반응하는 영역을 지정합니다.

checkbox 및 modern 모드에 적용됩니다.

• "cell" (기본값) — 전체 셀 영역이 클릭에 반응합니다.

• "checkbox" — 체크박스 아이콘만 클릭에 반응합니다(Excel과 호환되는 동작).

Microsoft Excel과 일치하는 동작이 필요한 경우 "checkbox"를 사용합니다.

var cellType = new GC.Spread.Sheets.CellTypes.CheckBox();
cellType.textTrue("Yes");
cellType.textFalse("No");
cellType.hitTestMode("checkbox");
activeSheet.getCell(1, 1).cellType(cellType);

텍스트 편집(textEditable)

체크박스가 텍스트 편집 모드(두 번 클릭 또는 F2)로 전환될 수 있는지를 결정합니다.

checkbox 및 modern 모드에 적용됩니다.

• true (기본값) — 텍스트를 편집할 수 있습니다.

• false — 텍스트 편집을 사용할 수 없습니다.

false로 설정하면 체크박스가 편집 모드로 전환될 수 없습니다.

var cellType = new GC.Spread.Sheets.CellTypes.CheckBox();
cellType.textTrue("Yes");
cellType.textFalse("No");
cellType.textEditable(false);
activeSheet.getCell(1, 1).cellType(cellType);

상태 모델

3상태 동작

체크박스는 선택됨, 선택 취소됨, 결정되지 않음의 세 가지 상태를 나타낼 수 있습니다.

결정되지 않은 상태를 사용하려면 다음과 같이 설정합니다.

cellType.isThreeState(true);

3상태 동작은 checkbox 및 modern 모드에서 지원됩니다.

toggle 모드에서는 지원되지 않습니다.

값 매핑

체크박스 상태는 셀 값에 따라 결정됩니다.

value 메서드를 사용하여 프로그래밍 방식으로 상태를 제어할 수 있습니다.

레이아웃 및 텍스트 줄 바꿈

텍스트 줄 바꿈

캡션 텍스트가 사용 가능한 셀 공간보다 긴 경우 셀에서 텍스트 줄 바꿈을 사용하도록 설정합니다.

wordWrap의 기본값은 false입니다.

cellType.caption("This is a very very long long text");

activeSheet.getCell(1, 1).cellType(cellType);
activeSheet.setRowHeight(1, 120);
activeSheet.setColumnWidth(1, 110);

// 줄 바꿈 사용
activeSheet.getCell(1, 1).wordWrap(true);

줄 바꿈 규칙

줄 바꿈을 사용하도록 설정한 경우:

• 먼저 단어 경계에서 텍스트가 줄 바꿈됩니다.

• 필요한 경우 사용 가능한 너비에 맞도록 단어를 추가로 분할합니다.

세로 맞춤

wordWrap을 사용하도록 설정하면 체크박스와 캡션이 셀의 세로 맞춤을 따릅니다.

가로 맞춤

캡션 텍스트는 셀의 가로 맞춤을 따릅니다. 캡션 텍스트의 맞춤만 변경됩니다.

Excel 가져오기 및 내보내기

체크박스 셀 타입은 Excel 파일 가져오기 및 내보내기를 지원합니다.

가져오기 동작

Excel에서 가져올 때:

• 셀 데이터가 null, undefined, true 또는 false가 아닌 경우 체크박스가 추가되지 않습니다.

• 셀 데이터가 null 또는 undefined인 경우 체크박스가 3상태로 설정됩니다.

• 가져온 체크박스는 기본 크기 "auto"를 사용합니다.

• 가로 맞춤이 left, center 또는 right가 아닌 경우 center로 설정됩니다.

• 세로 맞춤이 top, center 또는 bottom이 아닌 경우 bottom으로 설정됩니다.

• 체크박스 mode는 자동으로 "modern"으로 설정됩니다.

• 테이블 열 스타일에 체크박스가 포함되어 있으면 가져온 후 모드가 자동으로 "modern"으로 설정됩니다.

내보내기 동작

Excel로 내보낼 때:

• 모든 체크박스를 내보낼 수 있습니다.

• 체크박스가 결정되지 않은 상태인 경우 선택 취소된 상태로 내보내집니다.

• 캡션 및 기타 데이터는 내보내지지 않으며 체크박스 상태만 내보내집니다.

• 셀 데이터로 인해 내보낸 Excel 파일에서 체크박스로 표시되지 않을 수 있지만(예: 셀 데이터가 "Spread"인 경우) 셀은 체크박스 형식 셀로 유지됩니다.

• 가로 맞춤이 left, center 또는 right가 아닌 경우 left로 내보내집니다.

• 세로 맞춤이 top, center 또는 bottom이 아닌 경우 top으로 내보내집니다.

디자이너에서 체크박스 사용

디자이너에서는 다음 두 가지 방법으로 체크박스를 삽입할 수 있습니다.

1. 셀 유형을 체크박스로 설정

2. 리본에서 체크박스 명령 사용

두 방법 모두 선택한 셀에 체크박스 셀 타입을 할당하지만 서로 다른 기본 설정으로 체크박스를 초기화합니다.

삽입 방법

1. 셀 유형을 체크박스로 설정

   홈 → 스타일 → 셀 편집기 → 셀 유형 → 체크박스

   이 방법은 선택한 셀의 유형을 체크박스로 설정합니다.

   
   

2. 리본 명령에서 삽입

   삽입 → 컨트롤 → 체크박스

   
   

   이 명령은 선택한 셀에 체크박스를 직접 삽입합니다.

기본값 차이

두 가지 방법으로 삽입한 체크박스에는 다음과 같은 차이가 있습니다.

체크박스 속성 구성

셀을 체크박스 셀 타입으로 설정한 후 체크박스 셀 타입 대화 상자에서 해당 속성을 구성할 수 있습니다.

셀을 마우스 오른쪽 단추로 클릭하고 셀 타입 편집… 을 선택합니다.

체크박스 구성 대화 상자가 열립니다.

모드가 toggle로 설정되면 다른 대화 상자가 표시됩니다.