SpreadJS目前可以用作下拉列表的几种方式

本文总结了目前SpreadJS可以用作下拉列表的几种方式，以及各自优缺点的分析：
1.listDataValidation:
Excel中可以利用Excel数据验证功能的序列验证创建一个下拉列表，该方式是Excel中常见创建下拉列表的方式。SpreadJS中也支持了这一点，可以通过listDataValidation创建此类下拉列表，如下面代码所示：

1. var dv = new GC.Spread.Sheets.DataValidation.createListValidator('中国,美国,俄罗斯');

复制代码

通过序列数据验证创建一个下拉列表，列表选项有3个，分别为中国，美国，俄罗斯。
优点：
与Excel可以互相兼容，同样的效果通过导入导出可以与Excel互相支持。
缺点：
无法创建带有[text value]键值对映射的选项。
获取选项方法：
可以通过dataValidation中的value1方法来获取设置的选项

1. sheet.getDataValidator(1,1).value1()

复制代码

获取选中结果：
可以通过getValue来获取当前选中结果

1. sheet.getValue(1,1)

复制代码

2.ComboBox cellType:
在SpreadJS中可以通过设置ComboBox的单元格类型来为单元格设置一个下拉菜单。如下面代码所示：

1. var combo = new GC.Spread.Sheets.CellTypes.ComboBox();

复制代码

优点：
支持设置[text value]键值对的数据格式，并且combobox对象中提供了较多的方法来对下拉菜单进行定制。
缺点：
不支持导出Excel。
获取选项方法：
通过combobox对象中的item方法可以获得下拉菜单的选项

1. var combo = sheet.getCellType(1,1)
   
2. combo.items();
   

复制代码

获取选中结果：
通过getValue方法来获取下拉菜单选中结果。
这里注意可以通过设置editorValueType方法来更改获取选中结果的内容，可以获取由此判断获取选中结果的text还是value
例如：
当设置editorValueType为GC.Spread.Sheets.CellTypes.EditorValueType.text时，获取的选中项为下拉菜单选中项的text

1. //获取结果为中国

复制代码

当设置editorValueType为GC.Spread.Sheets.CellTypes.EditorValueType.value时，获取的选中项为下拉菜单选中项的value

1. //获取结果为CN
   
2. combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.value);
   
3. sheet.getValue(1,1)

复制代码

3.DropDownList:
SpreadJS中还有另一种方式来添加一个下拉列表，就是通过Style中的dropDowns来进行添加：
添加过程中我们需要通过dropDowns来添加一个列表，同时通过cellButtons来添加一个下拉按钮。

1. var style = new GC.Spread.Sheets.Style();
   
2.     style.cellButtons = [{
   
3.   imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
   
4.   command: "openList",
   
5.   useButtonStyle: true,
   
6.         }];
   
7.     style.dropDowns = [{
   
8.   type: GC.Spread.Sheets.DropDownType.list,
   
9.   option: {
   
10.     items: [{
    
11.       text: '中国',
    
12.       value: 'CN'
    
13.     },{
    
14.       text: '美国',
    
15.       value: 'US'
    
16.     },{
    
17.       text: '俄罗斯',
    
18.       value: 'RUS'
    
19.     }],
    
20.   }
    
21.         }];
    
22.     sheet.setStyle(1, 1, style);

复制代码

优点：
定制的方式更加灵活，采用按钮和列表分离设定，可以对按钮和列表各自进行定制化处理。
同时也可以支持一个单元格存在多个下拉选项的设定。
支持多选。
缺点：
不支持导出Excel。
当value与text不一致时，下拉列表中展示的是text，选中后单元格显示为value 并且人为不可更改。
获取选项方法：
通过getStyle方法获取DropDownList的结构，在结构中获取对应的item选项

1. var style = sheet.getStyle(1,1);

复制代码

注意由于一个单元格的Style中可以包含多个dropDowns，所以获取dropDowns的结果是一个数组，之后可以从数组中找到对应dropDown的item选项。

1. var items = dropDowns[0].option.items

复制代码

获取选中结果：
通过getValue方法获取单元格的value。该value即为选中item中的value。

4.FormControlComboBox:
FormControl(表单控件）是SpreadJS在V16版本中支持的新功能，该功能中可以设置ComboBox种类的控件，以此满足用户制作下拉列表的需求。

1. let comboBox = sheet.shapes.addFormControl('comboBox', GC.Spread.Sheets.Shapes.FormControlType.comboBox, 100, 50, 200, 30);
   
2. let options = comboBox.options();
   
3. options.inputRange = 'A1:A14';
   
4. options.cellLink = 'C1';
   
5. options.dropDownLines = 6;
   
6. comboBox.options(options);

复制代码

优点：
可以支持导入导出Excel，并且可以通过一些设置实现一些个性化配置，例如：dropDownLines可以控制列表显示的行数。cellLink可以将选择的选项链接到某个单元格中，也可以通过更改链接单元格的值反向控制列表中的选择项。
控件实体属于形状，可以自由移动位置不需要依附于某个单元格。
缺点：
不支持[text value]这种键值对结构。

无法直接设置选项的值，必须通过inputRange设置一个引用区域，在引用区域设置下拉列表的内容。
获取选项方法：
获取inputRange,在通过inputRange获取区域中的值
获取选中结果：
通过value方法获取选中结果

1. combox.value()

复制代码