# 셀 드롭다운
## Content
SpreadJS는 사용자가 워크시트에 드롭다운 셀을 추가할 수 있도록 지원합니다. 사용자는 특정 요구 사항과 선호도에 따라 워크북의 셀에 드롭다운 메뉴를 사용할 수 있습니다.
이러한 드롭다운 메뉴는 셀 안에 드롭다운 목록을 제공하여 사용자가 데이터를 보다 쉽고 빠르게 선택할 수 있도록 도와줍니다. 이는 특히 입력 폼 컨트롤, 고급 구조화 폼 및 스프레드시트 내의 기타 인터랙티브한 폼과 대시보드를 만드는 데 유용한 기능입니다.
**셀 드롭다운 유형** \- SpreadJS는 스프레드시트 작업 시 8가지의 내장 드롭다운 메뉴 유형을 제공합니다\. 사용자는 [DropDownType](/spreadjs/api/v19/enums/GC.Spread.Sheets.DropDownType) 열거형을 사용하여 0부터 7까지의 값을 지정하고, 해당 값에 따라 다음과 같은 셀 드롭다운 유형이 선택됩니다:
* **계산기 드롭다운 [열거형 값: 6]**
* **날짜 시간 선택기 드롭다운 [열거형 값: 1]**
* **월 선택기 드롭다운 [열거형 값: 3]**
* **시간 선택기 드롭다운 [열거형 값: 2]**
* **색상 선택기 드롭다운 [열거형 값: 0]**
* **리스트 드롭다운 [열거형 값: 4]**
* **슬라이더 드롭다운 [열거형 값: 5]**
* **워크플로 리스트 드롭다운 [열거형 값: 7]**
**셀 드롭다운 구성** \- 사용자는 다음과 같은 방식으로 드롭다운 셀을 구성할 수 있습니다:
* **리스트 드롭다운**을 사용하여 미리 정의된 값 목록을 제공
* **계산기 드롭다운**을 사용하여 계산된 값을 입력
* **날짜 시간 선택기, 월 선택기, 시간 선택기 드롭다운**을 사용하여 달력 및 이벤트 선택
* **색상 선택기 드롭다운**을 사용하여 색상 선택
* **슬라이더 드롭다운**을 사용하여 범위 슬라이더 생성
* **워크플로 리스트 드롭다운**을 사용하여 이전 선택에 따라 다음 선택지를 자동으로 갱신
아래 이미지에서 각 드롭다운 유형이 어떻게 표시되는지를 확인할 수 있습니다.
## 계산기 드롭다운
셀 내의 계산기 드롭다운은 사용자가 값을 계산하고 평가된 결과를 셀에 입력할 수 있도록 해줍니다. 아래 이미지는 C3 셀에 계산기 드롭다운이 표시되는 예시를 보여줍니다.
사용자는 [Style](/spreadjs/api/v19/classes/GC.Spread.Sheets.Style) 클래스의 [cellButtons](/spreadjs/api/v19/classes/GC.Spread.Sheets.Style#cellButtons) 필드를 사용하여 드롭다운 버튼을 추가하고, `command` 매개변수를 "**openCalculator**"로 설정하여 셀에 계산기 드롭다운을 구성할 수 있습니다.
자세한 내용은 아래 코드 스니펫을 참고하시기 바랍니다.
```javascript
// Calculator 드롭다운 설정
var calStyle = new GC.Spread.Sheets.Style();
calStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openCalculator",
useButtonStyle: true,
}
];
activeSheet.setText(2, 3, "Calculator Dropdown");
activeSheet.setStyle(2, 4, calStyle);
```
## **날짜 시간 선택기 드롭다운**
셀의 날짜 시간 선택기 드롭다운을 사용하면 사용자가 선택한 셀에 날짜와 시간을 설정하거나 드롭다운에서 날짜 범위를 선택할 수 있습니다.
아래 이미지는 드롭다운 표시기가 있는 셀의 날짜 시간 선택기 드롭다운을 보여줍니다
셀에 날짜 시간 선택기 드롭다운을 구성하려면, [Style](/spreadjs/api/v19/classes/GC.Spread.Sheets.Style) 클래스의 [cellButtons](/spreadjs/api/v19/classes/GC.Spread.Sheets.Style#cellButtons) 필드를 사용하여 드롭다운 버튼을 추가하고 `command` 매개변수를 "**openDateTimePicker** "로 설정하면 됩니다.
자세한 내용은 아래의 코드 스니펫을 참고하시기 바랍니다.
```javascript
// DateTimePicker 드롭다운 설정
var dateTimeStyle = new GC.Spread.Sheets.Style();
dateTimeStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openDateTimePicker",
useButtonStyle: true,
}
];
dateTimeStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.dateTimePicker,
option: {
showTime: true,
}
}
];
activeSheet.setText(4, 3, "DateTimePicker Dropdown");
activeSheet.setStyle(4, 4, dateTimeStyle);
```
아래 이미지는 날짜 시간 선택기 드롭다운을 사용하여 날짜 범위를 선택한 예를 보여줍니다.
위 이미지에서 첫 번째로 선택된 날짜는 시작 날짜이며, 두 번째로 선택된 날짜는 종료 날짜로, 날짜 범위 선택에 사용됩니다. 드롭다운에서 날짜 범위를 선택하려면 **showDateRange** 속성을 `true`로 설정하면 됩니다. `showDateRange` 속성이 `false`로 설정된 경우에는 일반 날짜/시간 선택 드롭다운이 표시됩니다. `showDateRange` 속성의 기본값은 `false`입니다.
날짜 범위를 선택하면 셀은 선택된 시작 시간과 종료 시간을 `Date` 객체로 반환합니다. 아래 인터페이스와 같이 반환됩니다.
```auto
{
start: Date
end: Date
}
```
또한 현재 날짜를 기준으로 한 기본 날짜 범위(예: "오늘", "어제", "지난 7일", "이번 달", "지난 달")를 선택할 수도 있습니다. 이를 위해서는 **showBuiltInDateRange** 속성 값을 `true`로 설정하면 됩니다. 이 속성 값이 `false`로 설정된 경우 기본 날짜 범위는 표시되지 않습니다. `showBuiltInDateRange` 속성의 기본값은 `true`입니다.
아래 코드는 DateTimePicker 드롭다운에서 숫자 범위를 설정하는 방법을 보여줍니다.
```javascript
// DateTimePicker 드롭다운을 숫자 범위로 설정
var dateTimeStyle = new GC.Spread.Sheets.Style();
dateTimeStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openDateTimePicker",
useButtonStyle: true,
}
];
dateTimeStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.dateTimePicker,
option: {
showTime: false,
showDateRange: true,
showBuiltInDateRange: true,
}
}
];
activeSheet.setStyle(0, 0, dateTimeStyle);
```
>type=warning
> **참고:** `showDateRange` 속성의 값이 `true`로 설정되면 다음과 같은 동작이 발생합니다:
>
> * [showTime](/spreadjs/api/v19/interfaces/GC.Spread.Sheets.ICalendarOption#showTime) 속성 값은 `false`가 됩니다. [calenderPage](/spreadjs/api/v19/interfaces/GC.Spread.Sheets.ICalendarOption) 속성 값은 `day`가 됩니다.
> * 키보드 이벤트는 취소됩니다.
## 월 선택 드롭다운
셀에서 월 선택 드롭다운을 사용하면 사용자가 연도 내의 특정 월을 선택하여 셀에 해당 결과 값을 설정할 수 있습니다.
아래 이미지는 드롭다운 표시기가 있는 C7 셀의 월 선택 드롭다운을 보여줍니다.
사용자는 [Style](/spreadjs/api/v19/classes/GC.Spread.Sheets.Style) 클래스의 [cellButtons](/spreadjs/api/v19/classes/GC.Spread.Sheets.Style#cellButtons) 필드를 사용하여 드롭다운 버튼을 추가하고, `command` 매개변수를 "**openMonthPicker** "로 설정하여 셀에 월 선택 드롭다운을 구성할 수 있습니다.
```javascript
// MonthPicker 드롭다운 설정
var monthPickerStyle = new GC.Spread.Sheets.Style();
monthPickerStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMonthPicker",
useButtonStyle: true,
}
];
monthPickerStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.monthPicker,
option: {
startYear: 2009,
stopYear: 2019,
height: 300,
}
}
];
activeSheet.setText(6, 3, "Month Picker Dropdown");
activeSheet.setStyle(6, 4, monthPickerStyle);
```
## 시간 선택 드롭다운
셀에서 시간 선택 드롭다운을 사용하면 사용자가 특정 시간을 설정하여 셀에 해당 결과 값을 입력할 수 있습니다.
아래 이미지는 드롭다운 표시기가 있는 C9 셀의 시간 선택 드롭다운을 보여줍니다.
사용자는 [Style](/spreadjs/api/v19/classes/GC.Spread.Sheets.Style) 클래스의 [cellButtons](/spreadjs/api/v19/classes/GC.Spread.Sheets.Style#cellButtons) 필드를 사용하여 드롭다운 버튼을 추가하고, `command` 매개변수를 "**openTimePicker** "로 설정하여 셀에 시간 선택 드롭다운을 구성할 수 있습니다.
```javascript
// TimePicker 드롭다운 설정
var timePickerStyle = new GC.Spread.Sheets.Style();
timePickerStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openTimePicker",
useButtonStyle: true,
}
];
timePickerStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.timePicker,
option: {
min: { hour: 8 },
max: { hour: 19 },
step: { minute: 30 },
formatString: "h:mm AM/PM",
}
}
];
activeSheet.setText(8, 3, "Time Picker Dropdown");
activeSheet.setStyle(8, 4, timePickerStyle);
```
## 색상 선택 드롭다운
셀에서 색상 선택 드롭다운을 사용하면 사용자가 특정 색상을 선택하여 해당 색상의 HEX 코드로 셀 값을 입력할 수 있습니다.
아래 이미지는 드롭다운 표시기가 있는 C11 셀의 색상 선택 드롭다운을 보여줍니다.
사용자는 [Style](/spreadjs/api/v19/classes/GC.Spread.Sheets.Style) 클래스의 [cellButtons](/spreadjs/api/v19/classes/GC.Spread.Sheets.Style#cellButtons) 필드를 사용하여 드롭다운 버튼을 추가하고, `command` 매개변수를 "**openColorPicker** "로 설정하여 셀에 색상 선택 드롭다운을 구성할 수 있습니다.
```javascript
// 드롭다운 설정
var colorPickerStyle = new GC.Spread.Sheets.Style();
colorPickerStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openColorPicker",
useButtonStyle: true,
}
];
activeSheet.setText(10, 3, "Color Picker Dropdown");
activeSheet.setStyle(10, 4, colorPickerStyle);
```
## 리스트 드롭다운
셀에서 리스트 드롭다운을 사용하면 사용자가 드롭다운 목록에서 특정 항목을 선택하여 셀 값을 입력할 수 있습니다.
아래 이미지는 드롭다운 표시기가 있는 C13 셀의 리스트 드롭다운을 보여줍니다.
사용자는 [Style](/spreadjs/api/v19/classes/GC.Spread.Sheets.Style) 클래스의 [cellButtons](/spreadjs/api/v19/classes/GC.Spread.Sheets.Style#cellButtons) 필드를 사용하여 드롭다운 버튼을 추가하고, `command` 매개변수를 "**openList** "로 설정하여 셀에 리스트 드롭다운을 구성할 수 있습니다.
```javascript
// List 드롭다운 설정
var listStyle = new GC.Spread.Sheets.Style();
listStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openList",
useButtonStyle: true,
}
];
listStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.list,
option: {
items: [
{
text: 'item1',
value: 'item1'
},
{
text: 'item2',
value: 'item2'
},
{
text: 'item3',
value: 'item3'
},
{
text: 'item4',
value: 'item4'
}
],
}
}
];
activeSheet.setText(12, 3, "List Dropdown");
activeSheet.setStyle(12, 4, listStyle);
```
또한 SpreadJS는 사용자가 드롭다운 목록에서 여러 항목을 선택하여 셀 값을 입력할 수 있도록 지원합니다.
아래 이미지를 보면 드롭다운에서 여러 항목을 선택하면, 선택된 항목들이 쉼표(,)로 구분되어 표시됩니다.
사용자는 **multiselect** 속성을 `true`로 설정하여 드롭다운 목록에서 여러 항목을 선택할 수 있습니다.
```javascript
// 리스트 데이터 설정
var listData = {
multiSelect: true,
items: [
{
text: 'SpreadSheets',
value: 'SpreadSheets',
layout: { displayAs: GC.Spread.Sheets.LayoutDisplayAs.popup },
items: [
{
text: 'Spread.NET',
value: 'Spread.NET'
},
{
text: 'SpreadJS',
value: 'SpreadJS'
},
{
text: 'Spread COM',
value: 'Spread COM'
},
{
text: 'DataViewJS',
value: 'DataViewJS'
}
]
},
{
text: 'Javascript',
value: 'Javascript',
},
{
text: 'Reporting',
value: 'Reporting',
},
{
text: 'Document APIS',
value: 'Document APIS',
layout: { displayAs: GC.Spread.Sheets.LayoutDisplayAs.popup },
items: [
{
text: 'Documents for Excel',
value: 'Documents for Excel'
},
{
text: 'Excel Template Language',
value: 'Excel Template Language'
},
{
text: 'Documents for PDF',
value: 'Documents for PDF'
},
{
text: 'Documents for PDF Viewer',
value: 'Documents for PDF Viewer'
},
{
text: 'Documents for Microsoft Word',
value: 'Documents for Microsoft Word'
},
{
text: 'Documents for Imaging',
value: 'Documents for Imaging'
}
]
}
]
};
var style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openList",
useButtonStyle: true,
}
];
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.list,
option: listData
}
];
activeSheet.setStyle(0, 0, style);
```
## 슬라이더 드롭다운
슬라이더 드롭다운(Slider Dropdown)은 셀에 동적인 범위 슬라이더를 추가하여, 현재 값을 셀에 입력할 수 있도록 합니다.
아래 이미지는 드롭다운 표시가 있는 셀에 슬라이더 드롭다운이 적용된 예시를 보여줍니다.
[Style](/spreadjs/api/v19/classes/GC.Spread.Sheets.Style) 클래스의 [cellButtons](/spreadjs/api/v19/classes/GC.Spread.Sheets.Style#cellButtons) 필드를 사용하여 드롭다운 버튼을 추가하고, `command` 매개변수를 "**openSlider** "로 설정하면 슬라이더 드롭다운을 셀에 구성할 수 있습니다.
아래 코드 스니펫은 슬라이더 드롭다운을 사용하여 범위의 종료 숫자만 조정할 수 있도록 설정하는 예시입니다.
```javascript
// Slider 드롭다운 설정
var horizontalSliderStyle = new GC.Spread.Sheets.Style();
horizontalSliderStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openSlider",
useButtonStyle: true,
}
];
horizontalSliderStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.slider,
option: {
marks: [0, 50, 100],
step: 10,
direction: GC.Spread.Sheets.LayoutDirection.horizontal,
}
}
];
activeSheet.setText(14, 3, "Slider Dropdown");
activeSheet.setStyle(14, 4, horizontalSliderStyle);
```
슬라이더 드롭다운에서 아래 이미지처럼 범위의 시작값과 끝값을 모두 설정할 수도 있습니다.
**showNumberRange** 속성을 `true`로 설정하면, 슬라이더 드롭다운에서 원하는 숫자 범위를 선택할 수 있습니다.
**showNumberRange** 속성이 `false`로 설정된 경우, 드롭다운은 이전의 슬라이더 선택 방식과 동일하게 동작합니다.
아래 코드는 슬라이더 드롭다운에서 숫자 범위를 설정하는 방법을 보여줍니다.
```javascript
// 숫자 범위를 설정하는 Slider 드롭다운을 설정
var horizontalSliderStyle = new GC.Spread.Sheets.Style();
horizontalSliderStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.slider,
option: {
marks: [0, 26, 37, 100],
step: 10,
direction: GC.Spread.Sheets.LayoutDirection.horizontal,
showNumberRange: true
}
}
];
activeSheet.setStyle(8, 4, horizontalSliderStyle);
spread.commandManager().execute({cmd:"openSlider",row:8,col:4,sheetName:"Sheet1"});
```
## 워크플로우 리스트 드롭다운
셀의 워크플로우 리스트 드롭다운은 사용자가 워크플로우 항목을 쉽고 빠르게 선택하여 선택된 값을 셀에 채워 넣을 수 있도록 해줍니다. 아래 이미지는 드롭다운 표시기가 있는 셀 C17의 워크플로우 리스트 드롭다운을 보여줍니다.
사용자는 [Style](/spreadjs/api/v19/classes/GC.Spread.Sheets.Style) 클래스의 [cellButtons](/spreadjs/api/v19/classes/GC.Spread.Sheets.Style#cellButtons)필드를 사용하고, `command` 매개변수를 "**openWorkflowList** "로 설정하여 셀에 드롭다운 버튼을 추가함으로써 워크플로우 리스트 드롭다운을 구성할 수 있습니다. 아래 코드 스니펫은 그 구현 예시를 보여줍니다.
```javascript
// Workflow 리스트 드롭다운 설정
let workflowListStyle = new GC.Spread.Sheets.Style();
workflowListStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openWorkflowList",
useButtonStyle: true,
}
];
workflowListStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.workflowList,
option: {
items: [
{ value: "New", transitions: [1] },
{ value: "Open", transitions: [0, 2, 3, 5] },
{ value: "In Progress", transitions: [1, 3, 5] },
{ value: "Resolved", transitions: [5, 4] },
{ value: "Reopened", transitions: [5, 3, 2] },
{ value: "Closed", transitions: [4] },
]
}
}
];
activeSheet.setText(16, 3, "Workflow List Dropdown");
activeSheet.setStyle(16, 4, workflowListStyle);
```
## 다중 열 드롭다운
셀의 다중 열 드롭다운은 사용자에게 드롭다운 목록과 함께 값을 입력할 수 있는 편집 영역을 제공하여, 목록에서 선택하거나 직접 값을 입력할 수 있도록 합니다. 셀에 다중 열 드롭다운을 구성하려면 [ButtonImageType](/spreadjs/api/v19/enums/GC.Spread.Sheets.ButtonImageType) 열거형을 `dropdown`으로, [DropDownType](/spreadjs/api/v19/enums/GC.Spread.Sheets.DropDownType) 열거형을 `multiColumn`으로 설정해야 합니다.
아래 이미지는 드롭다운 표시기가 있는 셀에서의 다중 열 드롭다운을 보여줍니다.
사용자는 마우스와 키보드를 사용하여 드롭다운 목록을 스크롤하고 항목을 선택할 수 있습니다. 목록에서 데이터를 선택하면 해당 데이터 항목이 현재 셀 값으로 객체 형태로 반환되며, 드롭다운을 다시 열면 선택된 항목이 강조 표시됩니다.
반환된 객체 값의 경우, 사용자는 [PROPERTY](/spreadjs/docs/v19/formulareference/FormulaFunctions/other-functions/property-function) 함수를 사용하여 해당 객체에서 특정 속성 값을 추출할 수 있습니다.
드롭다운을 사용자 지정하려면 데이터 소스를 지정해야 합니다. 다음 섹션에서는 지원되는 데이터 소스 유형을 설명합니다.
* 드롭다운 목록을 사용자 지정할 때 배열을 데이터 소스로 정의할 수 있습니다. 아래 이미지는 데이터 소스를 배열로 가져올 때의 다중 열 드롭다운을 보여줍니다.
아래 코드 스니펫은 배열 데이터 소스를 사용하여 다중 열 드롭다운을 설정하는 방법을 보여줍니다.
```javascript
// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// 활성화 시트 가져오기
var sheet = spread.getActiveSheet();
// DataSource는 배열
let dataSource = [
{
"NAME": "James Smith",
"POSITION": "AVP",
"OFFICE": "Fox Studios",
"EXTN": 71,
"START_DATE": '3/08/2008',
"JOINING_YEAR": 2008
}
];
let colInfos = [
{ name: "NAME", displayName: "NAME", size: "2*" },
{ name: "POSITION", displayName: "POSITION", size: "*" },
{ name: "OFFICE", size: "*" },
{ name: "EXTN", size: "*" },
{ name: "START_DATE", size: 100 },
{ name: "JOINING_YEAR", size: 100 }
];
// 스타일 설정
var style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 600,
height: 150,
dataSource: dataSource,
bindingInfos: colInfos
}
}
];
// 스타일의 포맷터 설정
style.formatter = '=PROPERTY(@, "NAME")';
// 스타일 설정
sheet.setStyle(0, 1, style);
// 텍스트 설정
sheet.setText(0, 0, "DataSource is array, return data parsed to the value of property 'NAME'.");
// wordwrap 설정
sheet.getCell(0, 0).wordWrap(true);
sheet.getCell(0, 1).wordWrap(true);
// 열 너비 설정
sheet.setColumnWidth(0, 200);
sheet.setColumnWidth(1, 400);
// 행 높이 설정
sheet.setRowHeight(0, 70);
```
* 드롭다운 목록을 사용자 지정할 때 데이터 소스를 수식 참조로 정의할 수 있습니다. 아래 이미지는 데이터 소스를 수식 참조로 가져올 때의 다중 열 드롭다운을 보여줍니다.
아래 코드 스니펫은 수식 참조 데이터 소스를 사용하여 다중 열 드롭다운을 설정하는 방법을 보여줍니다.
```javascript
// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// 동적 배열 허용
spread.options.allowDynamicArray = true;
// 활성화 시트 가져오기
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
// 열 너비 설정
for (var i = 0; i < 3; i++)
sheet.setColumnWidth(i, 70.0, GC.Spread.Sheets.SheetArea.viewport);
sheet.setColumnWidth(4, 30.0, GC.Spread.Sheets.SheetArea.viewport);
sheet.setColumnWidth(6, 30.0, GC.Spread.Sheets.SheetArea.viewport);
// 셀에 데이터 설정
sheet.setText(0, 0, "Region");
sheet.getCell(0, 0).backColor("LightGray");
sheet.setText(1, 0, "East");
sheet.setText(2, 0, "North");
sheet.setText(3, 0, "West");
sheet.setText(4, 0, "West");
sheet.setText(5, 0, "East");
sheet.setText(6, 0, "East");
sheet.setText(7, 0, "West");
sheet.setText(8, 0, "South");
sheet.setText(9, 0, "North");
sheet.setText(10, 0, "North");
sheet.setText(11, 0, "East");
sheet.setText(12, 0, "South");
sheet.setText(13, 0, "West");
sheet.setText(0, 1, "Sales Rep");
sheet.getCell(0, 1).backColor("LightGray");
sheet.setText(1, 1, "Tom");
sheet.setText(2, 1, "Fred");
sheet.setText(3, 1, "Amy");
sheet.setText(4, 1, "Sal");
sheet.setText(5, 1, "Hector");
sheet.setText(6, 1, "Xi");
sheet.setText(7, 1, "Amy");
sheet.setText(8, 1, "Sal");
sheet.setText(9, 1, "Fred");
sheet.setText(10, 1, "Tom");
sheet.setText(11, 1, "Hector");
sheet.setText(12, 1, "Sravan");
sheet.setText(13, 1, "Xi");
sheet.setText(0, 2, "Product");
sheet.getCell(0, 2).backColor("LightGray");
sheet.setText(1, 2, "Apple");
sheet.setText(2, 2, "Grape");
sheet.setText(3, 2, "Pear");
sheet.setText(4, 2, "Banana");
sheet.setText(5, 2, "Apple");
sheet.setText(6, 2, "Banana");
sheet.setText(7, 2, "Banana");
sheet.setText(8, 2, "Pear");
sheet.setText(9, 2, "Apple");
sheet.setText(10, 2, "Grape");
sheet.setText(11, 2, "Grape");
sheet.setText(12, 2, "Apple");
sheet.setText(13, 2, "Grape");
sheet.setText(0, 3, "Units");
sheet.getCell(0, 3).backColor("LightGray");
sheet.setText(1, 3, "6380");
sheet.setText(2, 3, "2344");
sheet.setText(3, 3, "3434");
sheet.setText(4, 3, "5461");
sheet.setText(5, 3, "2341");
sheet.setText(6, 3, "3234");
sheet.setText(7, 3, "6532");
sheet.setText(8, 3, "7323");
sheet.setText(9, 3, "2334");
sheet.setText(10, 3, "8734");
sheet.setText(11, 3, "1932");
sheet.setText(12, 3, "7682");
sheet.setText(13, 3, "3293");
sheet.setText(15, 0, "Product:");
sheet.getCell(15, 0).backColor("LightGray");
sheet.setText(15, 1, "Apple");
sheet.setText(16, 0, "Region:");
sheet.getCell(16, 0).backColor("LightGray");
sheet.setText(16, 1, "East");
// colInfos 배열 생성
var colInfos = [
{ name: "Region", size: "*" },
{ name: "Sales Rep", size: "*" },
{ name: "Product", size: "*" },
{ name: "Units", size: "*" }
];
// 스타일 생성
var style = new GC.Spread.Sheets.Style();
// "Filter" 수식 설정 (조건 1개)
// 범위 A1:D14에서 C1:C14 범위의 값이 셀 B16의 값과 같은 경우만 필터링
var dataSource = "FILTER(A1:D14, C1:C14=B16)";
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true
}
];
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 300,
height: 220,
dataSource: dataSource,
bindingInfos: colInfos
}
}
];
style.formatter = '=PROPERTY(@, "Sales Rep")';
// 텍스트 설정
sheet.setText(0, 5, "DataSource is formula '=FILTER(A1:D14, C1:C14=B16)', return data parsed to the value of property 'Sales Rep'.");
// 스타일 설정
sheet.setStyle(1, 5, style);
// 다른 스타일 설정
var style1 = new GC.Spread.Sheets.Style();
// "Filter" 수식 설정 (조건 2개)
// 범위 A1:D14에서 다음 두 조건을 만족하는 데이터를 필터링
// 1. C1:C14 범위의 값이 셀 B16의 값과 같음
// 2. A1:A14 범위의 값이 셀 B17의 값과 같음
var dataSource1 = "FILTER(A1:D14, (C1:C14=B16)*(A1:A14=B17))";
style1.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true
}
];
style1.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 300,
height: 220,
dataSource: dataSource1,
bindingInfos: colInfos
}
}
];
style1.formatter = '=PROPERTY(@, "Units")';
// 텍스트 설정
sheet.setText(0, 7, "DataSource is formula 'FILTER(A1:D14, (C1:C14=B16)*(A1:A14=B17))', return data parsed to the value of property 'Units'.");
// 스타일 설정
sheet.setStyle(1, 7, style1);
// 열 너비 설정
sheet.setColumnWidth(5, 300, GC.Spread.Sheets.SheetArea.viewport);
sheet.setColumnWidth(7, 300, GC.Spread.Sheets.SheetArea.viewport);
// wordwrap true로 설정
sheet.getCell(0, 5).wordWrap(true);
sheet.getCell(0, 7).wordWrap(true);
// 행 높이 설정
sheet.setRowHeight(0, 70);
sheet.resumePaint();
```
* 드롭다운 목록을 사용자 지정할 때 데이터 소스에 테이블을 정의할 수 있습니다.
아래 이미지는 데이터 소스를 테이블에서 가져올 때의 다중 열 드롭다운을 보여줍니다.
다음 코드 스니펫은 테이블 데이터 소스를 사용하여 다중 열 드롭다운을 설정하는 방법을 보여줍니다.
```javascript
// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// 활성화시트 가져오기
var sheet = spread.getActiveSheet();
// 열 너비 설정
sheet.setColumnWidth(0, 80);
sheet.setColumnWidth(1, 80);
sheet.setColumnWidth(3, 340);
sheet.suspendPaint();
// 데이터 설정
var data = [
{ Element: "Copper", Density: 8.94 },
{ Element: "Silver", Density: 10.49 },
{ Element: "Gold", Density: 19.30 },
{ Element: "Platinum", Density: 21.45 }
];
// 데이터 소스 설정
sheet.setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource({
ds: data
}));
// 테이블 추가
var table = sheet.tables.add("tableSource", 0, 0, 1, 1);
// 테이블 바인딩
table.bindingPath("ds");
// 스타일 생성
var style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true,
}
];
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 180,
height: 200,
dataSource: "tableSource[[#Headers], [#Data]]"
}
}
];
style.formatter = '=PROPERTY(@, "Element")';
// 텍스트설정
sheet.setText(0, 3, "DataSource is table reference, return data parsed to the value of property 'Element'.");
// 스타일 설정
sheet.setStyle(1, 3, style);
// word wrap true로 설정
sheet.getCell(1, 3).wordWrap(true);
sheet.resumePaint();
```
* 드롭다운 목록을 사용자 지정할 때 데이터 소스에 범위 참조를 정의할 수 있습니다.
아래 이미지는 데이터 소스를 범위 참조에서 가져올 때의 다중 열 드롭다운을 보여줍니다.
다음 코드 스니펫은 참조 범위 데이터 소스를 사용하여 다중 열 드롭다운을 설정하는 방법을 보여줍니다.
```javascript
// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// 활성화 시트 가져오기
var sheet = spread.getActiveSheet();
// 열 너비 행 높이 설정
sheet.setColumnWidth(0, 120);
sheet.setColumnWidth(1, 120);
sheet.setColumnWidth(2, 120);
sheet.setColumnWidth(3, 350);
sheet.setRowHeight(2, 40);
sheet.suspendPaint();
let colInfos = [
{ name: "NAME", displayName: "NAME", size: "*" },
{ name: "POSITION", displayName: "POSITION", size: "*" },
{ name: "OFFICE", size: "*" }
];
// 텍스트 설정
sheet.setText(0, 0, "James Smith");
sheet.setText(0, 1, "AVP");
sheet.setText(0, 2, "Willow Banks");
sheet.setText(1, 0, "Smitha Ryan");
sheet.setText(1, 1, "Lead Designer");
sheet.setText(1, 2, "Wall Street");
sheet.setText(2, 0, "Ana Hills");
sheet.setText(2, 1, "Team Lead");
sheet.setText(2, 2, "Wall Street");
var dataSource = "Sheet1!$A$1:$C$3";
// 스타일 설정
var style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openMultiColumn",
useButtonStyle: true
}
];
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.multiColumn,
option: {
width: 350,
height: 200,
// Set datasource
dataSource: dataSource,
bindingInfos: colInfos
}
}
];
style.formatter = '=PROPERTY(@, "POSITION")';
// 텍스트 설정
sheet.setText(0, 3, "DataSource is range reference, return data parsed to the value of property 'POSITION'.");
// 스타일 설정
sheet.setStyle(2, 3, style);
// wordwrap true 설정
sheet.getCell(2, 3).wordWrap(true);
sheet.resumePaint();
```
* **IMultiColumnOption** 속성을 사용하면 다중 열 드롭다운의 너비와 높이를 사용자 지정할 수 있습니다.
* **IMultiColumnOption**의`dataSource` 옵션의 경우, 바인딩할 데이터 소스를 지정해야 합니다.
* `bindingInfo` 옵션에서는 바운드 컬럼 정보(예: 이름, 크기, 표시 이름 등)를 사용자 지정할 수 있습니다.
* `returnDataType`의 경우, 기본 반환 타입은 객체(Object)입니다. 반환 타입을 문자열(String)로 변경하고 싶다면, 다중 열 드롭다운의 반환 값은 객체를 문자열로 변환하여 반환하게 됩니다.