Миграция на новые версии

5.2 -> 6.0

Устаревшие свойства

Следующие свойства ISpreadsheetConfig объявлены устаревшими и удалены. Актуальное использование приведено ниже:

свойство конфигурации dateFormat. Задайте его в объекте конфигурации localization:
- { localization: { dateFormat: "%d/%m/%Y" } }
свойство конфигурации timeFormat. Задайте его в объекте конфигурации localization:
- { localization: { timeFormat: 12 } }

Устаревшие методы

Следующие методы экземпляра ISpreadsheet объявлены устаревшими и удалены.

Используйте вместо них новый API модуля sheets (Sheet Manager):

Устаревший метод	Сигнатура	Новое использование	Новая сигнатура
`clearSheet(id?)`	`(id?: string) => void`	`sheets.clear(id?)`	`(id?: Id) => void`
`removeSheet(id)`	`(id: string) => void`	`sheets.remove(id)`	`(id: Id) => void`
`addSheet(name?)`	`(name?: string) => string`	`sheets.add(name?)`	`(name?: string) => Id`
`getSheets()`	`() => ISheet[]`	`sheets.getAll()`	`() => ISheet[]`
`getActiveSheet()`	`() => ISheet`	`sheets.getActive()`	`() => ISheet`
`setActiveSheet(id)`	`(id: Id) => void`	`sheets.setActive(id)`	`(id: Id) => void`

Устаревшие события

Следующие события объявлены устаревшими и удалены. Вместо них используйте пару универсальных событий beforeAction / afterAction.

Устаревшее событие	Сигнатура колбэка	Новое использование
`beforeValueChange`	`(cell: string, value: string) => void \| boolean`	`beforeAction` с действием `"setCellValue"`
`afterValueChange`	`(cell: string, value: string) => void`	`afterAction` с действием `"setCellValue"`
`beforeStyleChange`	`(cell: string, style: ...) => void \| boolean`	`beforeAction` с действием `"setCellStyle"`
`afterStyleChange`	`(cell: string, style: ...) => void`	`afterAction` с действием `"setCellStyle"`
`beforeFormatChange`	`(cell: string, format: string) => void \| boolean`	`beforeAction` с действием `"setCellFormat"`
`afterFormatChange`	`(cell: string, format: string) => void`	`afterAction` с действием `"setCellFormat"`
`beforeRowAdd`	`(cell: string) => void \| boolean`	`beforeAction` с действием `"addRow"`
`afterRowAdd`	`(cell: string) => void`	`afterAction` с действием `"addRow"`
`beforeRowDelete`	`(cell: string) => void \| boolean`	`beforeAction` с действием `"deleteRow"`
`afterRowDelete`	`(cell: string) => void`	`afterAction` с действием `"deleteRow"`
`beforeColumnAdd`	`(cell: string) => void \| boolean`	`beforeAction` с действием `"addColumn"`
`afterColumnAdd`	`(cell: string) => void`	`afterAction` с действием `"addColumn"`
`beforeColumnDelete`	`(cell: string) => void \| boolean`	`beforeAction` с действием `"deleteColumn"`
`afterColumnDelete`	`(cell: string) => void`	`afterAction` с действием `"deleteColumn"`
`beforeSheetAdd`	`(name: string) => void \| boolean`	`beforeAction` с действием `"addSheet"`
`afterSheetAdd`	`(sheet: ISheet) => void`	`afterAction` с действием `"addSheet"`
`beforeSheetRemove`	`(sheet: ISheet) => void \| boolean`	`beforeAction` с действием `"deleteSheet"`
`afterSheetRemove`	`(sheet: ISheet) => void`	`afterAction` с действием `"deleteSheet"`
`beforeSheetRename`	`(sheet: ISheet, value: string) => void \| boolean`	`beforeAction` с действием `"renameSheet"`
`afterSheetRename`	`(sheet: ISheet) => void`	`afterAction` с действием `"renameSheet"`
`beforeSheetClear`	`(sheet: ISheet) => void \| boolean`	`beforeAction` с действием `"clearSheet"`
`afterSheetClear`	`() => void`	`afterAction` с действием `"clearSheet"`

5.1 -> 5.2

Функциональность заморозки/разморозки

В версии 5.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"
});

введены новые методы API: freezeCols(), unfreezeCols(), freezeRows(), unfreezeRows()

Начиная с v5.2
// для строк
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

// для столбцов
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

добавлено новое действие: toggleFreeze

Начиная с v5.2
// использование действия `toggleFreeze` с событиями beforeAction/afterAction
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);
    }
});

добавлено новое свойство freeze для объекта sheets метода parse(). Оно позволяет фиксировать строки и столбцы для конкретных листов в наборе данных при разборе данных в 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

В версии 5.0 опция "help" свойства toolbarBlocks переименована в "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

В версии 4.2 блок Align панели инструментов Spreadsheet разделён на два подблока: Horizontal align и Vertical align. Соответственно, список идентификаторов стандартных элементов управления блока Align изменён и расширен:

До v4.2:

Блок Align:

кнопка Align left (id: "align-left")
кнопка Align center (id: "align-center")
кнопка Align right (id: "align-right")

Начиная с v4.2:

Подблок Horizontal align блока Align:

кнопка Left (id: "halign-left")
кнопка Center (id: "halign-center")
кнопка Right (id: "halign-right")

Подблок Vertical align блока Align:

кнопка Top (id: "valign-top")
кнопка Center (id: "valign-center")
кнопка Bottom (id: "valign-bottom")

Локализация

Обратите внимание, что настройки локали для блока Align также обновлены:

До v4.2:

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

Начиная с v4.2:

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

2.1 -> 3.0

Этот список изменений поможет вам выполнить миграцию с версии 2.1, где DHTMLX Spreadsheet был основан на PHP, на полностью переработанную версию 3.0, написанную целиком на JavaScript. Ознакомьтесь со списком ниже, чтобы изучить все изменения.

К сведению

API версии 2.1 по-прежнему доступен, но несовместим с API начиная с версии 3.0. Если вам требуется документация для версии 2.1, пожалуйста, свяжитесь с нами, и мы её вышлем.

Изменённый API

getStyle -> spreadsheet.getStyle - возвращает стили, применённые к ячейке(ам)
getValue -> spreadsheet.getValue - возвращает объект со значением(ями) ячейки(ек)
setStyle -> spreadsheet.setStyle - задаёт стиль для ячейки или диапазона ячеек
setValue -> spreadsheet.setValue - задаёт значение для ячейки или диапазона ячеек
lock -> spreadsheet.lock - блокирует ячейку или диапазон ячеек
unlock -> spreadsheet.unlock - разблокирует заблокированную ячейку или диапазон ячеек

Удалённый API

Класс Spreadsheet

getCell
getCells
isCell
setSheetId

SpreadsheetCell

calculate	getCoords	setBgColor
exists	getValidator	setBold
getAlign	isBold	setColor
getBgColor	isIncorrect	setItalic
getCalculatedValue	isItalic	setLocked
getColIndex	parseStyle	setValidator
getColName	serializeStyle
getColor	setAlign

5.2 -> 6.0​

Устаревшие свойства​

Устаревшие методы​

Устаревшие события​

5.1 -> 5.2​

Функциональность заморозки/разморозки​

4.3 -> 5.0​

4.2 -> 4.3​

4.1 -> 4.2​

Локализация​

2.1 -> 3.0​

Изменённый API​

Удалённый API​

Класс Spreadsheet​

SpreadsheetCell​

5.2 -> 6.0

Устаревшие свойства

Устаревшие методы

Устаревшие события

5.1 -> 5.2

Функциональность заморозки/разморозки

4.3 -> 5.0

4.2 -> 4.3

4.1 -> 4.2

Локализация

2.1 -> 3.0

Изменённый API

Удалённый API

Класс Spreadsheet

SpreadsheetCell