직렬화
SpreadJS는 사용자 정의 셀 유형, 사용자 정의 함수, 사용자 정의 포맷터, 사용자 정의 태그, 사용자 정의 sparklineEx의 직렬화(serialization)를 지원합니다.
직렬화 시, 사용자 정의 타입의 toJSON 메서드는 자신을 나타내는 문자열 필드 type을 저장합니다. 이 문자열 type은 mynamespace.MyCellType과 같이 window 객체와 관련된 문자열입니다. 역직렬화 시에는 getTypeFromString 메서드가 이 type 문자열을 파싱하여 사용자 정의 타입을 가져오고, 해당 타입의 인스턴스를 생성한 뒤 fromJSON 메서드를 호출합니다.
사용자 정의 타입의 type 필드에 실제 타입 문자열을 할당하면, 해당 사용자 정의 타입은 직렬화 및 역직렬화됩니다. 만약 사용자 정의 타입이 순환 참조(circular dependency)를 가지고 있거나 JSON 크기를 줄이고 싶거나, 그 외의 다른 요구사항이 있는 경우, 해당 사용자 정의 타입은 toJSON 및 fromJSON 메서드를 오버라이드해야 합니다.
또한, 사용자 정의 타입을 window 객체에 등록하고 싶지 않은 경우에는, 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 src="http://code.jquery.com/jquery-2.0.2.js" type="text/javascript"></script>
<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;
};
$(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));
$("#btn1").click(function () {
//ss에서 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>