[V14 新功能预览] Multiple Column Picker 多列下拉列表

收藏

在 V14 的新版本中，SpreadJS 将支持以表格的形式展示下拉列表，如下图

image.png66406554.png

用户可以通过设定数据源的方式自定义下拉列表内容，支持以下两种类型：

	设置 ColumnBindingInfo	未设置 ColumnBindingInfo
一维数组	根据列信息绑定数据	自动绑定数据
由公式返回的数组	根据列信息绑定计算后的数据数组	计算后的第一行作为列信息，从第二行开始作为数据源

通过鼠标滚动，并选择一行数据返回

通过键盘上下选择行，并通过回车键选择数据

实例代码：

# 数据源为数组

let dataSource = [
{
"Film": "27 Dresses",
"Genre": "Comedy",
"Lead Studio": "Fox",
"Audience Score %": 71,
"Profitability": 5.34,
"Rating": 40,
"Worldwide Gross": 160.30,
"Year": 2008
}
];
let colInfos = [
{ name: "Film", displayName: "FILM", size: "2*" },
{ name: "Genre", displayName: "GENRE", size: "*" },
{ name: "Lead Studio", size: "*" },
{ name: "Audience Score %", size: 120},
{ name: "Worldwide Gross", size: 100, formatter: "$#,##0.00"},
{ name: "Year", size: 50 }
];
let 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: 700,
height: 400,
dataSource: dataSource,
bindingInfos: colInfos
}
}
];
sheet.setStyle(0, 0, style);

复制代码

# 数据源为区域公式

let dataSource = [
{
"Film": "27 Dresses",
"Genre": "Comedy",
"Lead Studio": "Fox",
"Audience Score %": 71,
"Profitability": 5.34,
"Rating": 40,
"Worldwide Gross": 160.30,
"Year": 2008
}
];
let colInfos = [
{ name: "Film", displayName: "FILM", size: "2*" },
{ name: "Genre", displayName: "GENRE", size: "*" },
{ name: "Lead Studio", size: "*" },
{ name: "Audience Score %", size: 120},
{ name: "Worldwide Gross", size: 100, formatter: "$#,##0.00"},
{ name: "Year", size: 50 }
];
let 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: 700,
height: 400,
dataSource: dataSource,
bindingInfos: colInfos
}
}
];
sheet.setStyle(0, 0, style);
2. DataSource is range formula:
// The data source
sheet.setText(0, 0, "27 Dresses");
sheet.setText(0, 1, "Comedy");
sheet.setText(0, 2, "Fox");
sheet.setText(1, 0, "(500) Days of Summer");
sheet.setText(1, 1, "Comedy");
sheet.setText(1, 2, "Fox");
let dataSource = "Sheet1!$A$1:$C$2";
let colInfos = [
{ name: "Film", displayName: "FILM", size: "2*" },
{ name: "Genre", displayName: "GENRE", size: "*" },
{ name: "Lead Studio", size: "*" },
];
let 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: {
dataSource: dataSource,
bindingInfos: colInfos
}
}
];
sheet.setStyle(0, 0, style);

复制代码

# 数据源为表格区域

var data = [
{ name: "Yang", age: 24 },
{ name: "Wang", age: 35 },
{ name: "Zhang", age: 20 }
];
sheet.setDataSource(new GC.Spread.Sheets.Bindings.CellBindingSource({
name: "Yang",
age: 24,
country: "China",
city: "Xi'an",
ds: data
}));
var table = sheet.tables.add("tableSource", 6, 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: 120,
dataSource: "=tableSource[[#Headers], [#Data]]"
}
}
];
sheet.setStyle(1, 6, style);
sheet.getCell(1, 6).wordWrap(true);
sheet.setColumnWidth(6, 400);
sheet.setRowHeight(1, 50);

复制代码

# 数据源是公式返回数组

var colInfos = [
{ name: "Rate1", size: "*" },
{ name: "Rate2", size: "*" },
{ name: "Rate3", size: "*" },
];
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: 400,
height: 120,
dataSource: "=RANDARRAY(3,3)",
bindingInfos: colInfos
}
}
];
sheet.setStyle(1, 6, style);
sheet.getCell(1, 6).wordWrap(true);
sheet.setColumnWidth(6, 400);
sheet.setRowHeight(1, 50);

复制代码

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

[V14 新功能预览] Multiple Column Picker 多列下拉列表

0 个回复

活字格认证

讲师达人

悬赏达人

微信认证勋章

元老葡萄

SpreadJS 认证

SpreadJS 高级认证