[]
        
首页
开发者学堂
文档
论坛
市场
生态机会
活动
在线咨询 立即试用
(Showing Draft Content)

导入和导出JSON

你可以使用fromJSON 方法与toJSON 方法,从 JSON 对象导入数据或将数据导出至 JSON 对象。

从 JSON 对象导入数据时,你可以设置多项反序列化选项,实现自定义数据导入。这些选项包含 ignoreStyle、ignoreFormula、frozenColumnsAsRowHeaders、frozenRowsAsColumnHeaders 以及 doNotRecalculateAfterLoad。

将数据导出至 JSON 对象时,你可以设置多项序列化选项,用于自定义数据导出。这些选项包含 includeBindingSource、ignoreStyle、ignoreFormula、saveAsView、rowHeadersAsFrozenColumns、columnHeadersAsFrozenRows、includeAutoMergedCells、saveR1C1Formula 和 saveExternalSourcePivotCache。

注意:旧版本 SpreadJS 无法加载由 SpreadJS 3.20142.11 及更高版本生成的 JSON 文件。

与 JSON 对象之间导入、导出数据

以下代码示例演示如何向 JSON 对象导出数据以及从 JSON 对象导入数据。

workbook.fromJSON(jsonData, {
    ignoreFormula: true,
    ignoreStyle: true,
    frozenColumnsAsRowHeaders: false,
    frozenRowsAsColumnHeaders: false,
    doNotRecalculateAfterLoad: true,
});
workbook.toJSON({
    includeBindingSource: true,
    ignoreFormula: true,
    ignoreStyle: true,
    saveAsView: true,
    rowHeadersAsFrozenColumns: true,
    columnHeadersAsFrozenRows: true,
    includeAutoMergedCells: true,
    saveR1C1Formula: true,
    saveExternalSourcePivotCache: true,
});

保存外部透视源的透视缓存数据

当基于外部透视源(例如数据管理器数据表或视图)创建透视表时,JSON 和 SJS 保存操作会保留透视源关联关系,使透视表后续能够重新连接数据源完成刷新。

可通过 saveExternalSourcePivotCache 选项控制是否保存外部透视源已实例化的透视缓存数据。

  • 将 saveExternalSourcePivotCache 设置为 true 时,导出的 JSON 或 SJS 文件会包含外部源透视表实例化后的透视缓存记录。重新打开文件后,透视表可凭借缓存数据恢复,并沿用保存的透视源关系进行后续刷新。

  • 将 saveExternalSourcePivotCache 设置为 false 时,导出的 JSON 或 SJS 文件仅保留透视源关联关系,不存储实例化的外部源透视缓存记录。该方式能够减小文件体积,但待数据管理器数据就绪后,必须重新构建透视缓存。

workbook.toJSON({
    includeBindingSource: true,
    saveExternalSourcePivotCache: true
});

saveExternalSourcePivotCache 属于工作簿保存/导出选项,并非透视表源属性,不会修改透视表的数据源。

saveExternalSourcePivotCache 的默认值有待确认。

保存维度汇总设置

透视表的维度汇总配置可在 JSON、SJS 的保存与加载流程中完整保留。

相关配置包含各个透视表字段的小计启用状态、选定的自定义小计函数,以及固定的函数展示顺序。

var json = workbook.toJSON();
workbook.fromJSON(json);

如需了解维度汇总更多信息,请参阅维度汇总。

保存圆角边框设置

圆角边框配置可在 JSON、SJS 的保存与加载流程中完整保留。

单元格、合并区域或单元格范围使用圆角边框时,保存的样式会保留 borderRadius 参数值。

var sheet = workbook.getActiveSheet();
var style = new GC.Spread.Sheets.Style();
style.borderRadius = "8";
sheet.getCell(1, 1).setStyle(style);
var json = workbook.toJSON();
workbook.fromJSON(json);

如需了解圆角边框更多信息,请参阅边框、网格线与斜线。

加载 ssjson 文件

下方 Visual Code 示例展示加载 ssjson 文件的实现。

<?xml version="1.0"?>
<!--
  For more information on how to configure your ASP.NET application, visit http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
  </system.web>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".ssjson" mimeType="text/plain" />
    </staticContent>
  </system.webServer>
</configuration>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>TestLoad ssjson</title>
    <!--SpreadJS Widgets CSS-->
    <link href="./css/gc.spread.sheets.x.x.x.css" rel="stylesheet" type="text/css" />
         
    <!--jQuery Reference-->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>            
    <!--SpreadJS Widgets JavaScript-->
    <script src="./scripts/gc.spread.sheets.all.x.x.x.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {                    
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
            $.ajax({
                url: "TestFile.ssjson",
                datatype: "json",
                success: function (data) {
                    //here to load ssjson file.
                    spread.suspendPaint();
                    spread.fromJSON(JSON.parse(data));
                    spread.resumePaint();
                },
                error: function (ex) {
                    alert('Exception:' + ex);
                }
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>Sample for load .ssjson file</h2>
        </div>
        <div id="ss" style="width: 100%; height: 430px; border: 1px solid gray;"></div>
    </div>
</body>