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

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

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

2015-10-12_144923

2015-10-12_150249

2.在设计完成后导出

2015-10-12_145000

 

能够导出为两种格式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>

 

运行截图:

2015-10-12_150728

 

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,快来官网了解并下载它吧!