버튼 목록 셀

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

이 셀 유형은 다중 선택 값을 포함하는 인터랙티브 목록을 의미합니다. 하나의 셀 내에 여러 항목이 그룹으로 표시되며, 하나 또는 여러 옵션을 선택하여 최종 사용자의 응답을 기록할 수 있습니다. 사용자는 워크시트에 버튼 목록 셀을 생성하고, 버튼 목록의 항목 레이아웃을 원하는 방식으로 구성할 수 있습니다.

사용 시나리오

버튼 목록은 사용자가 연락처, 고객, 계정, 이벤트, 마케팅 목록 등 여러 관련 항목에 걸쳐 타겟팅 및 질의할 수 있는 관련 항목 그룹을 생성해야 할 때 유용합니다. 이 셀 유형은 체크 박스 목록 및 라디오 버튼 목록과 유사하지만, 사용자가 하나 또는 여러 항목을 선택할 수 있는 유연성을 제공합니다.

예시 – 아래 이미지는 사용자가 선호하는 프로그래밍 언어에 대한 응답을 기록하는 스프레드시트를 보여줍니다. 이 예시에서 B2 셀에 버튼 목록 셀 유형이 추가되어 사용자가 목록에서 하나 이상의 언어를 선택할 수 있도록 합니다.

버튼 목록 사용자 정의

SpreadJS에서 버튼 목록 셀 유형을 사용할 때, 사용자는 아래 작업을 통해 이를 자신에게 맞게 사용자 정의할 수 있습니다:

• SelectionMode 열거형을 사용하여 버튼 셀의 텍스트 선택 모드를 단일 선택(single) 또는 다중 선택(multiple)으로 지정할 수 있습니다.

• button 클래스의 selectedBackColor() 및 selectedForeColor() 메서드를 사용하여 목록에서 선택된 버튼 항목의 배경색 및 전경색을 사용자 정의할 수 있습니다.

• padding 메서드를 사용하여 셀 내 항목과 셀 경계 간의 여백(padding)을 픽셀 단위로 설정할 수 있습니다.

• isFlowLayout() 메서드를 사용하여 버튼 목록의 레이아웃이 자동 맞춤인지 여부를 설정할 수 있습니다. 이 메서드의 기본값은 "true"입니다.

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

• maxRowCount() 및 maxColumnCount() 메서드를 사용하여 버튼 목록의 행 수 및 열 수 항목을 가져오거나 설정할 수 있습니다. 단, isFlowLayout()이 "true"로 설정되어 있고 방향이 수평인 경우에만 가능합니다.

• itemSpacing() 메서드를 사용하여 셀 내부 항목 간 간격을 설정할 수 있으며, 항목이 서로 겹치지 않도록 혼잡함을 방지할 수 있습니다.

코드 사용 예시

다음 예제 코드는 스프레드시트의 셀에 기본 버튼 목록을 생성하는 방법을 보여줍니다.

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

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

// 이 예제는 ButtonList 셀 유형을 생성
var buttonListCellType = new GC.Spread.Sheets.CellTypes.ButtonList();
activeSheet.setText(0, 1, "Select Programming Languages : ", GC.Spread.Sheets.SheetArea.viewport);
buttonListCellType.items([{ text: "Javascript", value: 1 }, { text: "Python", value: 2 }, { text: "Java", value: 3 }, { text: "PHP", value: 4 }, { text: "Objective-C", value: 5 }, { text: "Ruby", value: 6 }, { text: "SQL", value: 7 }, { text: "Swift", value: 8 }, { text: "C/CPP", value: 9 }, { text: "C#", value: 10 }]);

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

// buttonListCellType의 방향을 수직으로 설정
buttonListCellType.direction(GC.Spread.Sheets.CellTypes.Direction .vertical);

// buttonList의 두 항목 간 간격을 설정
buttonListCellType.itemSpacing({
   horizontal: 80,
   vertical: 20
});

// 행 높이 설정
activeSheet.setRowHeight(1, 250.0, GC.Spread.Sheets.SheetArea.viewport);

// 열 너비 설
activeSheet.setColumnWidth(1, 250.0, GC.Spread.Sheets.SheetArea.viewport);