SpreadJS Designer提供了强大的可视化SpreadJS的设计能力，但是在设计完成后，怎样使用这些生成的模板呢？

本文主要介绍SpreadJS生成的两种格式的文件使用的方法。

1.打开SpreadJS Designer进行SpreadJS的设计

2.在设计完成后导出

能够导出为两种格式ssjson和Javascript

3.使用ssjson的方式

ssjson的优缺点

这种方式的优点是可以使用SpreadJS Designer重新打开，再进行编译。缺点是需要使用ajax的方式到服务器端进行加载。

            $(document).ready(function () {
                var spread = new GcSpread.Sheets.Spread($("#ss").get(0), { sheetCount: 3 });
                $.ajax({
                    url: "binding.ssjson",
                    datatype: "json",
                    success: function (data) {
                        //here to load ssjson file.
                        spread.isPaintSuspended(true);
                        spread.fromJSON(JSON.parse(data));
                        spread.isPaintSuspended(false);
                    },
                    error: function (ex) {
                        alert('Exception:' + ex);
                    }
                });
            });

配置XML提供ssjson的访问

<?xml version="1.0" encoding="utf-8"?>
<!--
  有关如何配置 ASP.NET 应用程序的详细信息，请访问
  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>

运行截图：

4.Javascript格式

Javascript的优缺点

这种方式的缺点是不能使用SpreadJS Designer重新打开。优点是可以使用javascript的方式直接引用。

<script type="text/javascript" src="binding.js"></script>

使用spread.fromJSON(binding);

    <script type="text/javascript">
             $(document).ready(function () {       
             		var spread = new GcSpread.Sheets.Spread($("#ss")[0],{sheetCount:1});
             		var data = { name: "小李", age: 20, gender: "男", email: "leo@test.com", married: true };
             		spread.fromJSON(binding); 
             		var sheet = spread.getActiveSheet();
             		sheet.setDataSource(new GcSpread.Sheets.CellBindingSource(data));
       					sheet.autoFitColumn(1);
       			});
    </script>

示例下载

这就是你想要的SpreadJS，快来官网了解并下载它吧！