[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

직렬화

SpreadJS는 사용자 정의 셀 타입, 사용자 정의 함수, 사용자 정의 포맷터, 사용자 정의 태그, 사용자 정의 sparklineEx의 직렬화를 지원합니다.

직렬화 시, 사용자 정의 타입의 toJSON 메서드는 자기 자신을 나타내는 문자열 필드 type을 저장합니다. 이 문자열 타입은 mynamespace.MyCellType처럼 window와 관련된 형식입니다. 역직렬화 시, getTypeFromString 메서드는 type 문자열을 파싱하여 사용자 정의 타입을 가져오고, 그 인스턴스를 생성한 다음 fromJSON 메서드를 호출합니다.

사용자 정의 타입의 type 필드에 실제 타입 문자열을 지정하면 해당 타입은 직렬화 및 역직렬화됩니다.

사용자 정의 타입이 순환 참조를 갖거나 JSON 크기를 줄이거나 다른 요구 사항이 있는 경우, toJSON과 fromJSON 메서드를 오버라이드해야 합니다.

사용자 정의 타입을 window 객체에 두고 싶지 않은 경우, type 문자열을 파싱하기 위해 getTypeFromString 메서드도 오버라이드해야 합니다.

다음 코드 예제는 spread1의 toJSON과 spread2의 fromJSON을 사용하여 spread1의 모든 데이터를 spread2로 직렬화하는 방법을 보여줍니다. 버튼 클릭 후 MyTag 인스턴스가 spread2에 존재하게 됩니다.

<!DOCTYPE html>
<html>
<head>
<title>Spread HTML test page</title>
<link type="text/css" href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet" />
<script type="text/javascript" src="./scripts/gc.spread.sheets.all.x.x.x.min.js"></script>
<script type="text/javascript">
    // 태그 사용자정의
    function MyTag(name, age) {
        this.name = name;
        this.age = age;
        this.typeName = "MyTag";
    }
    MyTag.prototype.toJSON = function () {
        var settings = {};
        settings.name = this.name;
        settings.age = this.age;
        settings.typeName = this.typeName;
        return settings;
    };
    MyTag.prototype.fromJSON = function (settings) {
        this.name = settings.name;
        this.age = settings.age;
        this.typeName = settings.typeName;
    };
    document.addEventListener("DOMContentLoaded", function () {

        var spread1 = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
        var sheet1 = spread1.getActiveSheet();
        sheet1.tag(new MyTag("Ivy", 24));
        sheet1.setTag(0, 0, new MyTag("Yang", 25));
        var btn1 = document.getElementById("btn1");        
        btn1.addEventListener("click", function () {
            //Serialize ss to ss1.
            var jsonStr = JSON.stringify(spread1.toJSON());

            var spread2 = new GC.Spread.Sheets.Workbook(document.getElementById("ss1"),{sheetCount:3});
            spread2.fromJSON(JSON.parse(jsonStr));
            var sheet2 = spread2.getActiveSheet();
            alert("Tag of sheet:" + JSON.stringify(sheet2.tag()));
            alert("Tag of Cell[0,0]: " + JSON.stringify(sheet2.getTag(0, 0)));
        });
    });
 </script>
 </head>
 <body>
     <div>
         <div id="ss" style="height: 200px; width: 500px"></div>
         <div id="ss1" style="height: 200px; width: 500px"></div>
     </div>
     <input type="button" id="btn1" value="Serialization" />
 </body>
 </html>