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

라디오 버튼 목록 셀

SpreadJS는 사용자가 스프레드시트의 셀 안에 라디오 버튼 리스트를 생성할 수 있도록 지원합니다.

이 셀 유형은 사용자가 셀 안에 나열된 여러 옵션 중에서 하나의 항목만 선택할 수 있는 기능을 제공합니다. 이는 하나의 셀 안에 삽입된 라디오 버튼(작은 원형의 선택 버튼) 그룹을 의미합니다. 사용자는 리스트에 있는 라디오 버튼을 클릭하여 특정 옵션을 선택하거나 선택 해제할 수 있습니다.

사용 시나리오

라디오 버튼 리스트 셀 유형은 여러 개의 옵션 중 하나만 선택받아야 하는 투표나 설문지를 만들고자 할 때 유용합니다.

예시 - 고객이 특정 제품을 구매할 때 어떤 결제 수단을 사용했는지 기록해야 하는 판매 애플리케이션을 작업 중이라고 가정해 봅시다. 이 경우 스프레드시트에서 라디오 버튼 리스트 셀 유형을 사용하면 사용자가 현금, 신용카드, 직불카드 등 제공된 결제 수단 중 하나만 선택할 수 있도록 도와줍니다.

radio-list.png

라디오 버튼 리스트 사용자 지정

SpreadJS에서 라디오 버튼 리스트 셀 유형을 사용할 때, 사용자는 다음과 같은 작업을 통해 리스트를 원하는 방식으로 커스터마이징할 수 있습니다:

  • textAlign 메서드를 사용하여 텍스트 정렬을 설정할 수 있습니다. TextAlign 열거형에는 left 및 right 옵션이 있습니다.

  • isFlowLayout 메서드를 통해 라디오 버튼 리스트의 레이아웃이 자동 맞춤(autofit)인지 여부를 확인할 수 있습니다. 기본값은 "true"입니다.

  • Direction 열거형을 사용하여 라디오 버튼 리스트 셀 유형의 방향을 수평(horizontal) 또는 수직(vertical)으로 설정할 수 있습니다.

  • isFlowLayout 이 true이고 방향이 수평일 경우, maxRowCount 및 maxColumnCount 메서드를 사용하여 행 수 및 열 수 항목을 설정하거나 가져올 수 있습니다.

  • itemSpacing메서드를 사용하여 셀 내부 항목 간의 간격을 조절할 수 있어 항목 간의 혼잡함을 줄일 수 있습니다.

  • boxSize 메서드를 사용하면 라디오 버튼의 크기를 숫자나 "auto" 값으로 설정할 수 있습니다. 유효하지 않은 값을 지정하면 크기는 변경되지 않습니다. 라디오 버튼 리스트 셀 유형의 기본 크기는 12입니다. 단, 이 메서드는 Chrome, Edge, Firefox, Internet Explorer, Opera, Safari, Android Webview, Chrome for Android, Firefox for Android, Opera for Android, iOS의 Safari, 삼성 인터넷 브라우저에서만 작동합니다.

코드 사용 예시

스프레드시트에서 셀 안에 기본적인 라디오 버튼 리스트를 생성하는 예제 코드입니다.

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

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

    // 이 예제는 radioButtonList 셀 유형을 생성
    var radioButtonListCellType = new GC.Spread.Sheets.CellTypes.RadioButtonList();
    activeSheet.setText(0, 1, "Select Mode Of Payment : ", GC.Spread.Sheets.SheetArea.viewport);
    radioButtonListCellType.items([{ text: "Credit Card", value: 1 },

    { text: "Debit Card", value: 2 }, { text: "Cash", value: 3 }]);
    radioButtonListCellType.isFlowLayout(true);

    // 라디오 버튼 리스트의 방향을 수평(horizontal)으로 설정
    radioButtonListCellType.direction(GC.Spread.Sheets.CellTypes.Direction.horizontal);

    // 라디오 버튼 리스트의 두 항목 간 간격을 설정
    radioButtonListCellType.itemSpacing({
        horizontal: 20, vertical: 10
    });

    // 라디오 버튼 텍스트의 위치를 설정 (left 및 right만 지원)
    radioButtonListCellType.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.left);

    // 라디오 버튼의 크기를 설정 (숫자 또는 "auto"만 지원)
    radioButtonListCellType.boxSize(20);
    activeSheet.getCell(1, 1).cellType(radioButtonListCellType);

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

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