跳到主要内容

迁移到新版本

5.2 -> 6.0​

已弃用的属性​

以下 ISpreadsheetConfig 属性已弃用并被移除。请查看下方的当前用法：

  • dateFormat 配置属性。请在 localization 配置对象中进行设置，如下：
    • { localization: { dateFormat: "%d/%m/%Y" } }
  • timeFormat 配置属性。请在 localization 配置对象中进行设置，如下：
    • { localization: { timeFormat: 12 } }

已弃用的方法​

以下 ISpreadsheet 实例方法已弃用并被移除。

请改用新的 sheets 模块（Sheet Manager）API：

已弃用方法签名新用法新签名
clearSheet(id?)(id?: string) => voidsheets.clear(id?)(id?: Id) => void
removeSheet(id)(id: string) => voidsheets.remove(id)(id: Id) => void
addSheet(name?)(name?: string) => stringsheets.add(name?)(name?: string) => Id
getSheets()() => ISheet[]sheets.getAll()() => ISheet[]
getActiveSheet()() => ISheetsheets.getActive()() => ISheet
setActiveSheet(id)(id: Id) => voidsheets.setActive(id)(id: Id) => void

已弃用的事件​

以下事件已弃用并被移除。请改用通用的 beforeAction / afterAction 事件对。

已弃用事件回调签名新用法
beforeValueChange(cell: string, value: string) => void | booleanbeforeAction，action 为 "setCellValue"
afterValueChange(cell: string, value: string) => voidafterAction，action 为 "setCellValue"
beforeStyleChange(cell: string, style: ...) => void | booleanbeforeAction，action 为 "setCellStyle"
afterStyleChange(cell: string, style: ...) => voidafterAction，action 为 "setCellStyle"
beforeFormatChange(cell: string, format: string) => void | booleanbeforeAction，action 为 "setCellFormat"
afterFormatChange(cell: string, format: string) => voidafterAction，action 为 "setCellFormat"
beforeRowAdd(cell: string) => void | booleanbeforeAction，action 为 "addRow"
afterRowAdd(cell: string) => voidafterAction，action 为 "addRow"
beforeRowDelete(cell: string) => void | booleanbeforeAction，action 为 "deleteRow"
afterRowDelete(cell: string) => voidafterAction，action 为 "deleteRow"
beforeColumnAdd(cell: string) => void | booleanbeforeAction，action 为 "addColumn"
afterColumnAdd(cell: string) => voidafterAction，action 为 "addColumn"
beforeColumnDelete(cell: string) => void | booleanbeforeAction，action 为 "deleteColumn"
afterColumnDelete(cell: string) => voidafterAction，action 为 "deleteColumn"
beforeSheetAdd(name: string) => void | booleanbeforeAction，action 为 "addSheet"
afterSheetAdd(sheet: ISheet) => voidafterAction，action 为 "addSheet"
beforeSheetRemove(sheet: ISheet) => void | booleanbeforeAction，action 为 "deleteSheet"
afterSheetRemove(sheet: ISheet) => voidafterAction，action 为 "deleteSheet"
beforeSheetRename(sheet: ISheet, value: string) => void | booleanbeforeAction，action 为 "renameSheet"
afterSheetRename(sheet: ISheet) => voidafterAction，action 为 "renameSheet"
beforeSheetClear(sheet: ISheet) => void | booleanbeforeAction，action 为 "clearSheet"
afterSheetClear() => voidafterAction，action 为 "clearSheet"

5.1 -> 5.2​

冻结/取消冻结功能​

在 v5.2 中，冻结/取消冻结列和行的方式已更改：

  • 之前用于固定列和行的 leftSplit 和 topSplit 配置属性已弃用并被移除
v5.2 之前
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    topSplit: 1, // the number of row to "freeze"
    leftSplit: 1 // the number of columns to "freeze"
});
从 v5.2 开始
// for rows
spreadsheet.freezeRows("B2"); // the rows up to the second row will be fixed
spreadsheet.freezeRows("sheet2!B2"); // the rows up to the second row in "sheet2" will be fixed
spreadsheet.unfreezeRows(); // fixed rows in the current sheet will be unfrozen
spreadsheet.unfreezeRows("sheet2!A1"); // fixed rows in "sheet2" will be unfrozen

// for columns
spreadsheet.freezeCols("B2"); // the columns up to the "B" column will be fixed
spreadsheet.freezeCols("sheet2!B2"); // the columns up to the "B" column in "sheet2" will be fixed
spreadsheet.unfreezeCols(); // fixed columns in the current sheet will be unfrozen
spreadsheet.unfreezeCols("sheet2!A1"); // fixed columns in "sheet2" will be unfrozen
从 v5.2 开始
// using the `toggleFreeze` action with the beforeAction/afterAction events
spreadsheet.events.on("afterAction", (actionName, config) => {
    if (actionName === "toggleFreeze") {
        console.log(actionName, config);
    }
});

spreadsheet.events.on("beforeAction", (actionName, config) => {
    if (actionName === "toggleFreeze") {
        console.log(actionName, config);
    }
});
  • 为 parse() 方法的 sheets 对象新增了 freeze 属性。该属性允许在将数据解析到 Spreadsheet 时，为特定工作表固定行和列：
从 v5.2 开始
const data = {
    sheets: [
        { 
            name: "sheet 1", 
            id: "sheet_1",
            data: [
                { cell: "A1", value: "Country" },
                { cell: "B1", value: "Product" }
            ],
            freeze: {
                col: 2,
                row: 2
            },
            // more "sheet_1" settings
        }, 
        // more sheets configuration objects
    ]
};

spreadsheet.parse(data);

4.3 -> 5.0​

在 v5.0 中，toolbarBlocks 属性的 "help" 选项被重命名为 "helpers"。此外，默认选项集现在新增了 "actions" 选项。

v5.0 之前
// default configuration 
toolbarBlocks: [
    "undo", 
    "colors", 
    "decoration", 
    "align", 
    "format", 
    "help"
]
从 v5.0 开始
// default configuration
toolbarBlocks: [
    "undo", 
    "colors", 
    "decoration", 
    "align", 
    "format", 
    "actions",
    "helpers"
]

4.2 -> 4.3​

信息

版本 4.3 是最后一个提供 IE 支持的版本

版本 4.3 引入了一种新的方式来追踪和处理在电子表格中执行更改时触发的操作。

新的 beforeAction 和 afterAction 事件会在操作执行前/后触发，并指示执行了哪个操作。这种方式只需使用这两个事件，即可为多个操作添加必要的逻辑。例如：

spreadsheet.events.on("BeforeAction", (actionName, config) => {
    if (actionName === "sortCells") {
        console.log(actionName, config);
        return true;
    }
    if (actionName === "addColumn") {
        console.log(actionName, config);
        return false;
    },
    ...
});

spreadsheet.events.on("AfterAction", (actionName, config) => {
    if (actionName === "sortCells") {
        console.log(actionName, config)
    }
    if (actionName === "addColumn") {
        console.log(actionName, config);
    },
    ...
});

这种方式减少了代码量，因为您无需为每个独立操作添加成对的 before- 和 after- 事件。

旧的方式仍然照常工作。更多详情，请查看 Spreadsheet 操作。

信息

目前，有一组事件必须以旧方式使用，因为它们无法被任何操作替代：beforeEditEnd、afterEditEnd、beforeEditStart、afterEditStart、beforeFocusSet、afterFocusSet、beforeSheetChange、afterSheetChange、groupFill。

4.1 -> 4.2​

在 v4.2 中，Spreadsheet 工具栏的 对齐 块被划分为两个子块：水平对齐和垂直对齐。因此，对齐块默认控件的 id 列表已更改并扩展：

v4.2 之前：

对齐 块：

  • 左对齐 按钮（id："align-left"）
  • 居中对齐 按钮（id："align-center"）
  • 右对齐 按钮（id："align-right"）

从 v4.2 开始：

对齐 块的 水平对齐 子块：

  • 左 按钮（id："halign-left"）
  • 居中 按钮（id："halign-center"）
  • 右 按钮（id："halign-right"）

对齐 块的 垂直对齐 子块：

  • 顶部 按钮（id："valign-top"）
  • 居中 按钮（id："valign-center"）
  • 底部 按钮（id："valign-bottom"）

本地化​

请注意，对齐 块的 语言区域选项 也已更新：

v4.2 之前：

const locale = {
    align: "Align",
    ...
}

从 v4.2 开始：

const locale = {
    halign: "Horizontal align",
    valign: "Vertical align",
    ...
}

2.1 -> 3.0​

此更改列表帮助您从版本 2.1（基于 PHP 的 DHTMLX Spreadsheet）迁移到完全用 JavaScript 重写的版本 3.0。请查看下方列表，了解所有更改内容。

信息

版本 2.1 的 API 仍然可用，但与 从版本 3.0 开始的 API 不兼容。如果您需要版本 2.1 的文档，请联系我们，我们将向您发送。

已变更的 API​

已移除的 API​

Spreadsheet 类​

  • getCell
  • getCells
  • isCell
  • setSheetId

SpreadsheetCell​

calculategetCoordssetBgColor
existsgetValidatorsetBold
getAlignisBoldsetColor
getBgColorisIncorrectsetItalic
getCalculatedValueisItalicsetLocked
getColIndexparseStylesetValidator
getColNameserializeStyle
getColorsetAlign
Need more help?Contact Support