シリアル化
Spread.Sheetsでは、カスタムセル型、カスタム関数、カスタムフォーマッタ、カスタムタグ、およびカスタムsparklineExのシリアル化をサポートします。
シリアル化を行うと、カスタム型の toJSON メソッドは、自身を示す文字列フィールド型を保管します。この文字列型は、「mynamespace.MyCellType」などのウィンドウに関連します。逆シリアル化を行う場合は、 getTypeFromString メソッドが型文字列を解析してカスタム型を取得します。次に、このカスタム型のインスタンスを作成し、このインスタンスの fromJSON メソッドを実行します。
カスタム型の型フィールドに実際の型文字列を割り当てると、カスタム型をシリアル化および逆シリアル化できます。カスタム型が循環依存を持つ場合、JSONのサイズを低減したい場合、または他の何らかの要件がある場合は、カスタム型でも toJSON および fromJSON メソッドをオーバーライドする必要があります。
ウィンドウオブジェクトにカスタム型を設定したくない場合は、型文字列を解析するための 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.9.40.20153.0.css" rel="stylesheet" />
<script type="text/javascript" src="./scripts/gc.spread.sheets.all.9.40.20153.0.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>