シリアル化の使用

Spread.Sheetsでは、カスタムセル型、カスタム関数、カスタムフォーマッタ、カスタムタグ、およびカスタムsparklineExのシリアル化をサポートします。

シリアル化を行うと、カスタム型のtoJSONメソッドは、自身を示す文字列フィールド型を保管します。この文字列型は、「mynamespace.MyCellType」などのウィンドウに関連します。逆シリアル化を行う場合は、getTypeFromStringメソッドが型文字列を解析してカスタム型を取得します。次に、このカスタム型のインスタンスを作成し、このインスタンスのfromJSONメソッドを実行します。

カスタム型の型フィールドに実際の型文字列を割り当てると、カスタム型をシリアル化および逆シリアル化できます。カスタム型が循環依存を持つ場合、JSONのサイズを低減したい場合、または他の何らかの要件がある場合は、カスタム型でもtoJSONおよびfromJSONメソッドをオーバーライドする必要があります。

ウィンドウオブジェクトにカスタム型を設定したくない場合は、型文字列を解析するための getTypeFromStringメソッドもオーバーライドする必要があります。

コードの使用

次のサンプルコードは、spread1のtoJSON、およびspread2のfromJSON関数を使用して、spread1のすべてのデータをspread2にシリアル化する機能を実装します。ボタンを選択すると、MyTagインスタンスがspread2にシリアル化されます。

JavaScript	コードのコピー
<!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 src="http://code.jquery.com/jquery-2.0.2.js" type="text/javascript"></script> <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>

JavaScript

コードのコピー

<!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 src="http://code.jquery.com/jquery-2.0.2.js" type="text/javascript"></script>
  <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>