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

收藏

本帖最后由 Clark.Pan 于 2023-6-6 10:24 编辑

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

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

复制代码

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

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

复制代码

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

sheet.getValue(1,1)

复制代码

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

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

复制代码

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

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

复制代码

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

//获取结果为中国

复制代码

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

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

复制代码

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

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: {
items: [{
text: '中国',
value: 'CN'
},{
text: '美国',
value: 'US'
},{
text: '俄罗斯',
value: 'RUS'
}],
}
}];
sheet.setStyle(1, 1, style);

复制代码

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

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

复制代码

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

var items = dropDowns[0].option.items

复制代码

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

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

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

复制代码

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

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

combox.value()

复制代码

		自动登录	找回密码
密码			立即注册

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

0 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄