Page History

Spread.Sheets supports serialization of custom cell types, custom functions, custom formatters, custom tags, and custom sparklineEx.

When serialized, a custom type's toJSON method stores a string field type that indicates itself. The string type is related to the window, such as "mynamespace.MyCellType". When deserialized, the getTypeFromString method gets the custom type by parsing the type string, then creates an instance of the custom type, and then invokes the fromJSON method of the instance.

If you assign the actual type string to the type field of a custom type, the custom type is serialized and deserialized. If a custom type has a circular dependency or you want to reduce the JSON size or have some other requirement, the custom type also needs to override the toJSON and fromJSON methods.

If you do not want to put the custom type on a window object, you also need to override the getTypeFromString method for parsing the type string.

Using Code

This example uses spread1’s toJSON and spread2’s fromJSON function to implement serializing all data from spread1 to spread2. The “MyTag” instance is on spread2 after selecting the button.支持以下类型的序列化：

自定义 CellType
自定义公式方法
自定义 formatter
自定义 tag
自定义 sparklineEx

当序列化时，自定义类型的 toJSON 方法将会根据当前对象生成一个 JSON 字符串，并在字符串中加入当前的类型信息。字符串类型是和 window 相关的，比如 “mynamespace.MyCellType”。

当反序列化时，getTypeFromString 方法会先创建一个类型的实例，然后调用该实例上的 fromJSON 方法还原该对象。

如果类型字符串是自定义的字符串，自定义字符串将会按照自定义类型来序列化和反序列化。

如果你有诸如循环引用或者减少 JSON 尺寸一类的需求，请重写 fromJSON 和 toJSON 方法。

如果你不想使用 window 上的类型，你可以自行调用 getTypeFromString 方法来序列化和反序列化

示例代码

以下例子使用了 spread1 伤的 toJSON 方法和 spread2 上的 fromJSON 方法来实现从 spread1 上到 spread2 上的数据传递。

点击按钮后，“MyTag”实例将会出现在 spread2 上。

JavaScript

Copy Code

<!DOCTYPE html>
 <html>
 <head>
 <title>Spread HTML test page</title>
 <link type="text/css" href="./css/gc.spread.sheets.10.0.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.10.0.0.min.js"></script>
<script type="text/javascript">
    //Custom tag          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 () {
                 //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>

...

Page tree

Versions Compared

Old Version 1

New Version 2

Key

Using Code

示例代码