[{"id":"7720ca38-fc98-4fd8-a3a5-3c0e730c3c72","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"247ded67-b050-4436-be40-fe7b0eeabef7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"9a8c377f-1f1e-476e-b487-c2339da9bed3","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5e8e6db2-89b9-4184-bbdc-301ee676869e","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e04b598e-b0d8-4054-bdac-5143d90b3d51","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"edb028d0-a8cc-42b2-acda-42a5515729f0","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2adde444-20a6-43d7-8896-2b445877327a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6ab8ced2-6c7a-41b6-b861-ba066bd40f40","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"0c34aedd-80a3-470b-a0f6-c327a4346be7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"717a5892-fa23-499b-a61d-cff228943aaf","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"bd9be971-69fc-4793-ad6d-234be7a93048","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a1e8d38f-43d8-4b3e-b747-3fbf7656fcd9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d6995fdf-76ee-421f-9e7a-3fb324d14bbb","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"64fa3155-4543-4acd-83b7-f9860fd46673","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"698413bd-0b16-4287-baec-644d98a411d1","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7e4393a0-21ef-438b-981b-325b64db5baa","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]}]
        
(Showing Draft Content)

シリアル化

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 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>