[]
SpreadJS는 사용자가 스프레드시트의 셀 안에 라디오 버튼 리스트를 생성할 수 있도록 지원합니다.
이 셀 유형은 사용자가 셀 안에 나열된 여러 옵션 중에서 하나의 항목만 선택할 수 있는 기능을 제공합니다. 이는 하나의 셀 안에 삽입된 라디오 버튼(작은 원형의 선택 버튼) 그룹을 의미합니다. 사용자는 리스트에 있는 라디오 버튼을 클릭하여 특정 옵션을 선택하거나 선택 해제할 수 있습니다.
라디오 버튼 리스트 셀 유형은 여러 개의 옵션 중 하나만 선택받아야 하는 투표나 설문지를 만들고자 할 때 유용합니다.
예시 - 고객이 특정 제품을 구매할 때 어떤 결제 수단을 사용했는지 기록해야 하는 판매 애플리케이션을 작업 중이라고 가정해 봅시다. 이 경우 스프레드시트에서 라디오 버튼 리스트 셀 유형을 사용하면 사용자가 현금, 신용카드, 직불카드 등 제공된 결제 수단 중 하나만 선택할 수 있도록 도와줍니다.
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);
});