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

체크박스 목록 셀

SpreadJS는 사용자가 스프레드시트의 셀 내에 체크 박스 목록을 생성할 수 있도록 지원합니다.

이는 여러 선택 항목 값을 가진 인터랙티브 체크리스트 또는 할 일 목록을 의미합니다. 하나의 셀에 여러 개의 체크박스(작은 사각형 선택 상자)를 표시하며, 사용자는 특정 옵션을 선택하거나 선택 해제하기 위해 체크박스를 클릭할 수 있습니다.

사용 시나리오

체크 박스 목록 셀 유형은 스프레드시트 작업 중 하나의 셀에서 여러 항목 값을 선택해야 할 때 유용합니다. 체크 박스 목록을 사용하면 고객 피드백 설문조사, 입력 폼, 인터랙티브 체크리스트, 동적 보고서를 쉽고 효율적으로 생성할 수 있습니다.

예시 – 회사 제품에 대한 최종 사용자 반응을 쉽고 효과적으로 분석하고자 할 때, 워크시트 내에 사용자 친화적인 체크 박스 목록을 생성하는 것이 고객 반응을 기록하는 훌륭한 방법이 됩니다. 아래 스냅샷을 참고하시기 바랍니다:


체크 박스 목록 사용자 정의

SpreadJS에서 체크 박스 목록 셀 유형을 사용할 때 사용자는 다음 작업을 통해 자신의 필요에 따라 목록을 사용자 정의할 수 있습니다:

  • textAlign 메서드를 사용하여 텍스트 정렬을 구성할 수 있습니다. TextAlign 열거형의 사용 가능한 옵션은 left와 right입니다.

  • isFlowLayout 메서드를 사용하여 체크 박스 목록의 레이아웃이 자동 맞춤인지 여부를 확인할 수 있습니다. 이 메서드의 기본 value 매개변수는 "true"입니다.

  • Direction 열거형을 사용하여 체크 박스 목록 셀 유형의 방향을 수평 또는 수직으로 설정할 수 있습니다.

  • maxRowCount 메서드와 maxColumnCount 메서드를 사용하여 체크 박스 목록의 행 수 및 열 수 항목을 가져오거나 설정할 수 있습니다. 이 작업은 isFlowLayout 메서드의 value 매개변수가 true이고 방향이 수평인 경우에만 가능합니다.

  • itemSpacing 메서드를 사용하여 항목 간 간격을 구성할 수 있어, 셀 내부의 항목 간 혼잡과 과밀을 방지할 수 있습니다.

  • boxSize 메서드를 사용하여 체크 박스의 크기를 변경할 수 있으며, 값은 숫자 또는 "auto"로 설정할 수 있습니다. 잘못된 값이 설정되면 체크 박스 크기는 변경되지 않습니다. 체크 박스 목록 셀 유형의 기본 체크 박스 크기는 12*12입니다. 단, 이 메서드는 Chrome, Edge, Firefox, Internet Explorer, Opera, Safari, Android WebView, Android용 Chrome, Android용 Firefox, Android용 Opera, iOS의 Safari, 삼성 인터넷 브라우저에서만 작동합니다.

  • 사용자는 CheckBoxList.mode('toggle') 메서드를 통해 표준 체크박스를 대화형 토글 스위치로 변환할 수 있습니다.

    • 이 모드는 autoSize를 통한 동적 텍스트 크기 조정, width/height를 통한 고정 크기 지정, 그리고 sliderColorOn, trackColorOff, 모서리 반경 조정을 통한 활성/비활성 상태의 시각적 사용자 지정을 지원합니다.

    • 텍스트 정렬 옵션에는 컴팩트한 레이아웃을 위한 CheckBoxTextAlign.inside가 포함됩니다.

참고:

  • autoSize가 비활성화된 경우 autoFitWidth/autoFitHeight는 텍스트 오버플로우를 무시합니다.

  • toggle 모드에서는 boxSize 구성이 사용할 수 없습니다.

  • 상태 변경은 셀 영역 상호작용이 아닌 명시적인 버튼 클릭이 필요합니다.

코드 예시

다음 예제 코드는 스프레드시트 작업 중 셀에 기본 체크 박스 목록을 생성하는 방법을 보여줍니다.

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

    // 활성화 시트 가져오기 
    var activeSheet = spread.getSheet(0);

   // 이 예제는 CheckBoxList 셀 유형을 생성
    var checkBoxListCellType = new GC.Spread.Sheets.CellTypes.CheckBoxList();
    activeSheet.getCell(0, 1).font("italic 16px Calibri");
    activeSheet.getCell(0, 1).foreColor("Red");
    activeSheet.getCell(0, 1, GC.Spread.Sheets.SheetArea.viewport).value("What factors are important to you when buying software products? ").wordWrap(true);
    checkBoxListCellType.items([{ text: "Price", value: 1 }, { text: "Usability", value: 2 }, { text: "Features", value: 3 }, { text: "Support", value: 4 }, { text: "Others", value: 5 }]);

    // CheckBoxList의 두 항목 간 간격을 설정
    checkBoxListCellType.itemSpacing({
        horizontal: 20, vertical: 10
    });

    // CheckBoxList 셀 유형을 수직 방향으로 설정
    checkBoxListCellType.direction(GC.Spread.Sheets.CellTypes.Direction.vertical);

    // CheckBoxList 내 텍스트의 위치를 설정(left와 right만 지원) 
    checkBoxListCellType.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right);

    // CheckBoxList 내 체크박스 크기를 설정(숫자와 "auto"만 지원)  
    checkBoxListCellType.boxSize(20);
    activeSheet.getCell(1, 1).cellType(checkBoxListCellType);

    // 행 높이 구성
    activeSheet.setRowHeight(0, 70.0, GC.Spread.Sheets.SheetArea.viewport);
    activeSheet.setRowHeight(1, 160.0, GC.Spread.Sheets.SheetArea.viewport);

    // 열 너비 구성
    activeSheet.setColumnWidth(1, 200.0, GC.Spread.Sheets.SheetArea.viewport);
});

image

이 예제는 체크박스 목록에서 토글 모드를 구현합니다.

window.onload = function () {
    // Spread 초기화
    var spread = new GC.Spread.Sheets.Workbook('ss', { sheetCount: 1 });
    // 활성화 시트 가져오기
    var activeSheet = spread.getSheet(0);
    // 이 예제는 CheckBoxList 셀 유형을 생성
    var checkBoxListCellType = new GC.Spread.Sheets.CellTypes.CheckBoxList();
    checkBoxListCellType.items([
        { text: "Price", value: 1 },
        { text: "Usability", value: 2 },
        { text: "Features", value: 3 },
        { text: "Support", value: 4 },
        { text: "Others", value: 5 }]);
    // CheckBoxList에서 두 항목의 간격을 구성합니다.
    checkBoxListCellType.itemSpacing({
        horizontal: 20, vertical: 10
    });
    // 토글 모드를 사용합니다.
    checkBoxListCellType.mode('toggle');
    // Configure the toggle switch
    checkBoxListCellType.toggleOptions({
        autoSize: true,
        sliderMargin: 2,
        trackColorOn: '#8cbae8',
        trackColorOff: '#9e9e9e',
        sliderColorOn: '#1565c0',
        sliderColorOff: '#ffffff',
    });
    // checkBoxListCellType를 세로 방향으로 구성합니다.
    checkBoxListCellType.direction(GC.Spread.Sheets.CellTypes.Direction.vertical);
    // CheckBoxList에서 텍스트의 위치를 구성하며, 왼쪽과 오른쪽만 지원합니다.
    checkBoxListCellType.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.inside);
    // CheckBoxList에서 체크박스 크기를 구성하며, 숫자와 "auto"만 지원합니다.
    activeSheet.getCell(1, 1).cellType(checkBoxListCellType);
    // 행 높이를 구성합니다.
    activeSheet.setRowHeight(1, 180.0, GC.Spread.Sheets.SheetArea.viewport);
    // 열 너비를 구성합니다.
    activeSheet.setColumnWidth(1, 150.0, GC.Spread.Sheets.SheetArea.viewport);
}