본문으로 건너뛰기

최신 버전으로 마이그레이션

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 | boolean"setCellValue" 액션과 함께 beforeAction 사용
afterValueChange(cell: string, value: string) => void"setCellValue" 액션과 함께 afterAction 사용
beforeStyleChange(cell: string, style: ...) => void | boolean"setCellStyle" 액션과 함께 beforeAction 사용
afterStyleChange(cell: string, style: ...) => void"setCellStyle" 액션과 함께 afterAction 사용
beforeFormatChange(cell: string, format: string) => void | boolean"setCellFormat" 액션과 함께 beforeAction 사용
afterFormatChange(cell: string, format: string) => void"setCellFormat" 액션과 함께 afterAction 사용
beforeRowAdd(cell: string) => void | boolean"addRow" 액션과 함께 beforeAction 사용
afterRowAdd(cell: string) => void"addRow" 액션과 함께 afterAction 사용
beforeRowDelete(cell: string) => void | boolean"deleteRow" 액션과 함께 beforeAction 사용
afterRowDelete(cell: string) => void"deleteRow" 액션과 함께 afterAction 사용
beforeColumnAdd(cell: string) => void | boolean"addColumn" 액션과 함께 beforeAction 사용
afterColumnAdd(cell: string) => void"addColumn" 액션과 함께 afterAction 사용
beforeColumnDelete(cell: string) => void | boolean"deleteColumn" 액션과 함께 beforeAction 사용
afterColumnDelete(cell: string) => void"deleteColumn" 액션과 함께 afterAction 사용
beforeSheetAdd(name: string) => void | boolean"addSheet" 액션과 함께 beforeAction 사용
afterSheetAdd(sheet: ISheet) => void"addSheet" 액션과 함께 afterAction 사용
beforeSheetRemove(sheet: ISheet) => void | boolean"deleteSheet" 액션과 함께 beforeAction 사용
afterSheetRemove(sheet: ISheet) => void"deleteSheet" 액션과 함께 afterAction 사용
beforeSheetRename(sheet: ISheet, value: string) => void | boolean"renameSheet" 액션과 함께 beforeAction 사용
afterSheetRename(sheet: ISheet) => void"renameSheet" 액션과 함께 afterAction 사용
beforeSheetClear(sheet: ISheet) => void | boolean"clearSheet" 액션과 함께 beforeAction 사용
afterSheetClear() => void"clearSheet" 액션과 함께 afterAction 사용

5.1 -> 5.2​

고정/해제 기능​

v5.2에서는 열과 행의 고정/해제 방식이 변경되었습니다:

  • 열과 행을 고정하는 데 사용되었던 leftSplit 및 topSplit 구성 속성이 더 이상 사용되지 않으며 제거되었습니다
v5.2 이전
const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    topSplit: 1, // 고정할 행 수
    leftSplit: 1 // 고정할 열 수
});
v5.2부터
// 행의 경우
spreadsheet.freezeRows("B2"); // 두 번째 행까지의 행이 고정됩니다
spreadsheet.freezeRows("sheet2!B2"); // "sheet2"의 두 번째 행까지의 행이 고정됩니다
spreadsheet.unfreezeRows(); // 현재 시트의 고정된 행이 해제됩니다
spreadsheet.unfreezeRows("sheet2!A1"); // "sheet2"의 고정된 행이 해제됩니다

// 열의 경우
spreadsheet.freezeCols("B2"); // "B" 열까지의 열이 고정됩니다
spreadsheet.freezeCols("sheet2!B2"); // "sheet2"의 "B" 열까지의 열이 고정됩니다
spreadsheet.unfreezeCols(); // 현재 시트의 고정된 열이 해제됩니다
spreadsheet.unfreezeCols("sheet2!A1"); // "sheet2"의 고정된 열이 해제됩니다
v5.2부터
// beforeAction/afterAction 이벤트와 함께 `toggleFreeze` 액션 사용
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
            },
            // "sheet_1"의 추가 설정
        }, 
        // 추가 시트 구성 객체
    ]
};

spreadsheet.parse(data);

4.3 -> 5.0​

v5.0에서는 toolbarBlocks 속성의 "help" 옵션이 "helpers"로 이름이 변경되었습니다. 또한 기본 옵션 세트에 새로운 "actions" 옵션이 추가되었습니다.

v5.0 이전
// 기본 구성
toolbarBlocks: [
    "undo", 
    "colors", 
    "decoration", 
    "align", 
    "format", 
    "help"
]
v5.0부터
// 기본 구성
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​

이 변경 사항 목록은 PHP 기반이었던 버전 2.1에서 완전히 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