SpreadJS表格控件有着很强大的功能:序列化与反序列化表格。熟练使用该功能达到加快开发进度,减少代码量,降低业务逻辑复杂度,处理一些特殊逻辑需求等效果。
下载SpreadJS最新试用版
前言
SpreadJS表格控件有着很强大的功能:序列化与反序列化表格。熟练使用该功能达到加快开发进度,减少代码量,降低业务逻辑复杂度,处理一些特殊逻辑需求等效果。
功能使用介绍:
序列化:
通过序列化可以将当前的整个spread序列化成为JSON格式进行存储。通过spread.toJSON(serializationOption)方法就可以做到,方法中还提供一些选项可以用来控制序列化的结果:
var serializationOption = { ignoreFormula: true, // 如果设置为true则忽略公式,不会序列化公式,只会将公式计算的结果序列化到JSON中。 ignoreStyle: true, // 如果设置为true则忽略样式,所有style中的属性将不会序列化到JSON中 rowHeadersAsFrozenColumns: true, // 将行头转换为冻结列序列化 columnHeadersAsFrozenRows: true, // 将列头转换为冻结行序列化 includeBindingSource: true // 将数据绑定的数据源也序列化到json中}
反序列化:
通过反序列化可以将之前序列化的JSON格式的对象反序列化成为页面进行展示。通过spread2.fromJSON(json, jsonOptions)方法可以做到,同样方法中也提供一些选项来控制反序列化的结果:
var jsonOptions = { ignoreFormula: true, // 如果设置为true则忽略公式,反序列化时忽略公式,只会将公式计算的结果反序列化展示到页面中。 ignoreStyle: true, // 如果设置为true则忽略样式,不会将style中的属性反序列化展示 frozenColumnsAsRowHeaders: true, // 将冻结列转换为行头 frozenRowsAsColumnHeaders: true, // 将冻结行转换为列头 doNotRecalculateAfterLoad: true, // 反序列化后公式不进行重新计算}
常见使用场景:
1、在设计器中使用序列化和反序列化:

在页面展示的时候我们可以在js中读取该文件(例如jquery的$.getJSON(),通过js文件读取等方式),并将获取到的json对象通过spread.fromJSON反序列化成页面展示。这样就完成了模板的快速构建。
2、差异化处理
在用户的业务逻辑中经常需要进行一些差异化的处理,例如:填 模板的中设置的公式,不希望在导出的时候被导出。那么可以通过在tojson中进行设置来忽略。
3、多列头的导出
SpreadJS中有一些扩展的功能例如多列头是Excel不支持的,而该功能经常在业务逻辑中被使用,所以如果有同时需要导出Excel的处理这种鱼和熊掌不可兼得的事情往往会产生很多困扰,那么为了解决这样的问题,在导出之前的toJSON时就可以通过设置columnHeadersAsFrozenRows属性,之后将生成的json在导出时传递给ExcelIO,这样导出的Excel中会将SpreadJS的多列头通过冻结行来进行显示。例如下面的表格:

设置了多行头与多列头,要想导出Excel中包含行头和列头的信息,可以在toJSON的时候设置rowHeadersAsFrozenColumns与columnHeadersAsFrozenRows这两个属性,那么导出之后就可以将行头列头信息显示在Excel中,像这样:

SpreadJS | 下载试用
纯前端表格控件SpreadJS,是市面上布局与功能都与 Excel 高度类似的一款表格控件,全中文操作界面,适用于.NET、Java、移动端等多个平台的类 Excel 数据开发,备受华为、中通、民航飞行学院等国内知名企业客户青睐。
标签:JavaScript 表格控件Spread
声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!