预定义列
SpreadJS中的TableSheet允许您添加、更新或删除具有有意义列类型的列，以便在运行时设计表格。
要在最后一列后显示“添加列”按钮，请将enableDefineColumn TableSheet选项设置为true。右键单击时，将显示上下文菜单，其中包含修改、删除和设置列的主键的选项，如下图所示。
以下示例代码显示如何在TableSheet中启用“添加列”按钮。
tableSheet.options.enableDefineColumn = true;内置列类型
TableSheet允许您定义具有预定义列属性的列类型，这些属性根据列的类型进行分类。以下是内置列类型的列表：数字、文本、公式、复选框、日期、货币、百分比、电话、电子邮件、URL、查找、创建时间、修改时间、附件、选择和条形码。
主要的列类型属性如下：
Value（必填）：包括列值，但如果其类型不是公式或查找类型，则此字段不能包含公式或关系。
Caption（可选）：包括列标题的显示名称。
Type（必填）：允许选择内置列类型。以下是一些内置列的示例图。
所有支持的列类型的数据类型和示例列选项如下表所示。
列类型 | 数据类型 | 示例列选项 |
|---|---|---|
Number | number | { value: "Number", type: "Number", caption: "Number", dataType: "number", defaultValue: 0, style: {formatter: "0.00", mask: { pattern: "0{0,}" } } } |
Text | string | { value: "Text", type: "Text", caption: "Text", dataType: "string" } |
Formula | depends | { name: "NamedFormula", value: "=[@Amount]*[@UnitPrice]", type: "Formula", caption: "Total Sales", dataType: "formula", style: {formatter: "0.00"}, readonly: true } |
Lookup | depends | { value: "customer.ContactName", type: "Lookup", caption: "Customer", readonly: true } |
Date | date | { value: "Date", type: "Date", caption: "Date", dataType: "date", style: { formatter: "m/d/yyyy", cellButtons: [{ buttonBackColor: "transparent", command: "openDateTimePicker", enabled: true, visibility: 'always', imageType: "dropdown", useButtonStyle: false }], dropDowns: [{ type: "dateTimePicker", option: { calendarPage: "day", showTime: false, startDay: "sunday" } }] } } |
Checkbox | boolean | { value: "Checkbox", type: "Checkbox", caption: "Checkbox", dataType: "boolean", style: { cellType: { type: "checkbox" } } } |
Select | depends | { value: "Select", type: "Select", caption: "Select", dataType: "number", style: { cellType: { type: "combobox" } } } |
Currency | number | { value: "Currency", type: "Currency", caption: "Currency", dataType: "number", style: {formatter: "[$$-409]#,##0.00"} } |
Percent | number | { value: "Percent", type: "Percent", caption: "Percent", dataType: "number", style: {formatter: "0%"} } |
Phone | string | { value: "Phone", type: "Phone", caption: "Phone", dataType: "string", style: { mask: { pattern: "1 (0{3}) 0{3}-0{4}" } } } |
string | { value: "Email", type: "Email", caption: "Email", dataType: "string", style: { mask: { pattern: "[a0.\-]{1,}@[a0.\\-]{1,}.(com|cn|gov|edu)" } } } | |
URL | string | { value: "URL", type: "URL", caption: "URL", dataType: "string", style: { cellType: { type: "hyperlink" } } } |
CreatedTime | date | { value: "CreatedTime", type: "CreatedTime", caption: "CreatedTime", dataType: "date", defaultValue: "=NOW()", readonly: true, trigger: { when: "onNew", formula: "=NOW()" }, style: { formatter: "m/d/yyyy", cellButtons: [{ buttonBackColor: "transparent", command: "openDateTimePicker", enabled: true, visibility: 'always', imageType: "dropdown", useButtonStyle: false }], dropDowns: [{ type: "dateTimePicker", option: { calendarPage: "day", showTime: false, startDay: "sunday" } }] } } |
ModifiedTime | date | { value: "ModifiedTime", type: "ModifiedTime", caption: "ModifiedTime", dataType: "date", readonly: true, trigger: { when: "onNewAndUpdate", formula: "=NOW()", fields: "*" }, style: { formatter: "m/d/yyyy", cellButtons: [{ buttonBackColor: "transparent", command: "openDateTimePicker", enabled: true, visibility: 'always', imageType: "dropdown", useButtonStyle: false }], dropDowns: [{ type: "dateTimePicker", option: { calendarPage: "day", showTime: false, startDay: "sunday" } }] } } |
Attachment | object | { value: "Attachment", type: "Attachment", caption: "Attachment", style: { cellType: { type: "fileUpload" } } } |
Barcode | depends | { value: "Barcode", type: "Barcode", caption: "Barcode", defaultValue: 0, style: { formatter: "=BC_QRCODE([@Barcode],"#000000","#FFFFFF","L",2,"auto","auto",false,0,,"UTF-8",,,,)"} } |
远程配置
SpreadJS允许使用自定义函数与远程表格进行通信，如下所述。
自定义函数 | 描述 | 示例定义 |
|---|---|---|
getColumns | 检索表中的列 | getColumns: { url: apiColumnUrl } |
addColumn | 添加列 | addColumn: { url: apiColumnUrl, method: 'POST' } |
updateColumn | 更新列属性 | updateColumn: { url: apiColumnUrl, method: 'PUT' } |
removeColumn | 删除列 | removeColumn: { url: apiColumnUrl, method: 'DELETE' } |
batch | 批量提交更改 | batch: { url: apiUrl + 'Collection' } |
在交互过程中，自定义函数的请求和响应数据如下：
自定义函数 | 请求数据 | 响应数据 |
|---|---|---|
getColumns | 无 | Column[] |
addColumn | ColumnWithDefaultData | ColumnData |
updateColumn | ModifiedColumnData | ModifiedColumnData |
removeColumn | ColumnData | ColumnData |
batch | BatchItemData[] | BatchResultData[] |
远程API的列处理可以通过自定义函数类似于以下自动同步和批处理模式进行处理：
var orderTable = dataManager.addTable("orderTable", {
remote: {
read: function() {
return Promise.resolve([...])
},
getColumns: function() {
return Promise.resolve([...])
},
addColumn: function(change) {
return Promise.resolve()
},
updateColumn: function(change) {
return Promise.resolve();
},
removeColumn: function(change) {
return Promise.resolve();
},
// batch: function(changes) {
// return Promise.resolve([...]);
// },
},
autoSync: true,
// batch: true
});启用autoSync模式时，TableSheet列的任何更改将立即同步到远程表格。但是，在启用batch模式时，列的更改将存储在本地。在调用submitChange命令时，更改的列信息和更改的数据信息将一起发送到远程表格。
[
{ "type": "updateColumn", "column": { field: 'columnName', dataType: 'number', ...otherproperties }, "originalColumn": { field: 'columnName0', ...otherproperties } },
{ "type": "addColumn", "column": { field: 'columnName1', dataType: 'number', ...otherproperties }, },
{ "type": "removeColumn", "column": { field: 'columnName2', ...otherproperties }, },
{ "type": "delete", "dataItem": { ...} },
{ "type": "insert", "dataItem": { ...} },
{ "type": "update", "dataItem": { ...}, "oldDataItem": { ...}, "sourceIndex": 1 }
]在调用cancelChange命令时，它会取消所有更改。对于批处理模式，TableSheet上的getChanges命令会同时检索列和数据的更改。
定义列的命令
SpreadJS还提供使用DefineColumn、ModifyColumn和RemoveColumn等命令来添加、更新或删除列的功能。这些命令允许您通过实现IColumn接口中的属性（如value、dataType、defaultValue、isPrimaryKey、type或name）来添加、更新和删除表中的列。
让我们讨论一些实现这些命令的代码示例。
定义列
以下示例代码展示了如何实现DefineColumn命令。
spread.commandManager().execute({
cmd: "DefineColumn",
sheetName: spread.getActiveSheetTab().name(),
// col: 3, // 可选
column: {
type: 'Number', // 指定列类型
value: 'Number1', // 列实例的列标识符
caption: '# Number1', // 该列在文化中显示的标题
style: { formatter: '#,##0.00_);[Red](#,##0.00)' } // 格式化器可以指定或通过UI操作转换
} as GC.Data.IColumn,
});修改列
以下示例代码展示了如何实现ModifyColumn命令。
spread.commandManager().execute({
cmd: "ModifyColumn",
sheetName: spread.getActiveSheetTab().name(),
col: 3,
column: {
type: 'Text', // 指定列类型
value: 'Text1', // 列实例的列标识符
caption: 'A Text1', // 该列在文化中显示的标题
} as GC.Data.IColumn,
});删除列
以下示例代码展示了如何实现RemoveColumn命令。
spread.commandManager().execute({
cmd: "RemoveColumn",
sheetName: spread.getActiveSheetTab().name(),
col: 3,
});定义自定义列
TableSheet提供了自定义列类型或使用自定义命令（如defineColumnCommand、submitDefineColumnCommand）添加一些特殊列类型的功能，或使用columnTypeItems命令更新内置列。
以下代码示例展示了如何添加一些特殊列类型或更新内置列类型。
// 选择一些列类型来展示
const items = tableSheet.options.columnTypeItems.filter((item) => item.name === 'Select' || item.name === 'Attachment' || item.name === 'Barcode' || item.name === 'CreatedTime' || item.name === 'ModifiedTime' || item.name === 'Currency');
tableSheet.options.columnTypeItems = tableSheet.options.columnTypeItems.slice(0, 4).concat(items);
// 添加自定义列类型
tableSheet.options.columnTypeItems.unshift({
name: 'CustomizingType',
text: 'Progress',
iconClass: 'gc-defined-column-type-icon-number'
});defineColumnCommand指定了用于替换默认命令的命令，该命令会在添加列按钮或修改列菜单项时打开定义的列弹出窗口。
以下示例代码展示了如何实现defineColumnCommand。
// 处理打开定义列弹出窗口
const defineCommand = tableSheet.options.defineColumnCommand;
tableSheet.options.defineColumnCommand = 'defineColumnCustom';
spread.commandManager().register('defineColumnCustom', {
canUndo: false,
execute: function (context, options) {
// 可以在修改/添加列时构建自定义UI
// 示例中打开默认UI
options.cmd = defineCommand;
spread.commandManager().execute(options);
}
});submitDefineColumnCommand指定了在选择定义列弹出窗口的提交按钮时提交定义列选项的命令。
以下示例代码展示了如何实现submitDefineColumnCustom。
// 处理提交定义列选项
tableSheet.options.submitDefineColumnCommand = 'submitDefineColumnCustom';
spread.commandManager().register('submitDefineColumnCustom', {
canUndo: false,
execute: function (context, options) {
if (options.command === 'DefineColumn' && options.column.type === 'CustomizingType') {
options.column.defaultValue = 0.1;
options.column.style = {
formatter: "=HBARSPARKLINE([@" + options.column.value + "], \"#66B032\")"
};
}
options.cmd = options.command;
spread.commandManager().execute(options);
}
});使用设计器
SpreadJS Designer组件还提供了通过从TABLE SHEET DESIGN > Options组中选择Enable Define Column复选框来定义列的功能。
Enable Define Column复选框
您还可以配置远程API，以便在SpreadJS Designer组件中与远程数据表通信，前提是远程数据表支持此功能。
