研发的背景与初衷

表格(Table)是一种可视化交流方式,同时也是企业最普遍的数据整理手段,大多数企业的信息自动化都是从一张电子表格开始的,不论是应对文档、报告、凭证,还是表单票据等,只要我们需要对数据进行增删改查,表格都能高效地完成。


(电子表格软件的市场占有率)

作为由若干行、列所构成的一种有序的组织形式,表格能够附加存储更多的样式信息,在移动互联时代的应用软件中,即便再复杂的数据通过“表格”的整理,都可以清晰的呈现给用户,并支持从多个维度查看、筛选和修改。

葡萄城作为全球领先的开发技术提供商,自1991年便投入了研发精力,开拓并探索如何将电子表格以组件的方式嵌入到各类应用系统中。 如今,葡萄城的表格技术已经做到了在保留用户使用习惯的同时,也能基于用户的经验和积累在业务系统中提供同样高效的数据处理和可视化能力。

SpreadJS

纯前端表格控件

SpreadJS

纯前端表格控件

了解更多

GcExcel

服务端高性能表格组件

GcExcel

服务端高性能表格组件

了解更多

Spread .NET

.NET 表格控件

Spread .NET

.NET 表格控件

了解更多

常见的电子表格系统

在线文档系统

在线文档系统

基于表格模板实现的多人协同编辑,不同部门的多个角色可以在线同时完成对同一张数据表的录入与编辑。

数据填报系统

数据填报系统

类似 Excel 的数据展示与获取,用于实现在线/离线填报数据、批量导入导出 Excel 文档、打印报送、实时预览和数据校验。

表单和报表类系统

表单和报表类系统

在线设计各类表单模板,实现从本地到线上的数据迁移,重用系统原始 Excel 文件,构建企业报表平台。

表格组件的技术优势

高性能

在企业应用中,数据是唯一的主干。假如作为数据载体的表格性能低下,系统便会被“吐槽”卡顿、操作不流畅等问题,为此,任何基于表格开发的应用系统,必须满足以最低的资源消耗,实现高速渲染、计算和频繁刷新的效果。

对于在线系统而言,为了追求更好的用户体验,需要对 UI 界面反复优化,而频繁的优化操作,将引发浏览器多次重绘。在这个过程中,UI 元素的创建及修改,会激活浏览器内部垃圾回收机制,影响数据处理效率。

基于此,电子表格系统的性能主要体现以下三个方面:

  • 在当页面从服务端下载了数据之后,表格是否能快速的呈现数据。
  • 用户滚动、操作时,表格是否流畅。
  • 当表格中有筛选、排序,以及大数据量的数据透视时是否能快速完成。
为了解决这些问题,葡萄城表格组件引入了 Canvas 绘制模型双缓冲画布渲染技术。

Canvas 绘制模型

使用 Canvas 绘制,表格在页面绘制过程中不仅无需重复创建和销毁 DOM 元素,更是打破了 DOM 元素渲染对 UI 的诸多限制,可绘制种类更为丰富的 UI 元素,如线形、特殊图形等,通过画法逻辑,还可实现更加精准的UI界面渲染,解决了浏览器差异造成的样式误差。


(HTML5 Canvas 绘制表格)

双缓存画布渲染

葡萄城表格技术采用了类似油画的分层绘制,即绘制引擎基于油画的绘制原理,分为主体图层和装饰图层,主体图层渲染持久的、不易改变的元素,例如背景,单元格,表格线等。装饰图层则渲染常变性元素,如选择框、拖拽框、悬浮效果等。当表格元素发生动态绘制,如表格滚动时, SpreadJS 会将主画布清空,从缓存画布中根据行为上下文进行画布偏移,将偏移后的图层直接绘制在主画布上,再在主画布上绘制剩余部分,使整个表格的滚动过程更加流畅。


(双缓存画布技术)

处理海量复杂数据

随着前端工程化的高速发展,企业应用系统已经由 C/S 向 B/S 架构转型,各种前端工程脚手架日渐成熟,WebComponent 标准也被提上日程,对于前端开发者来说,不仅需要面对单线程处理复杂业务数据的挑战,还要从产品最开始设计以及运行时考虑内存的使用情况,尽可能的降低内存占用,防止页面崩溃。

这里的复杂数据,不仅指的是数据量大,更是一种数据的处理状态。为了追求更高效的数据前后端交互,并快速响应数据变更及数据回滚状态,葡萄城改变了表格数据的存储方式,由常规数组改为稀疏矩阵,这一点,确保了葡萄城表格技术产品足以轻松应对海量复杂数据的挑战。

稀疏矩阵

相较于传统的链式存储或是数组存储,稀疏矩阵存储构建了基于行索引为 Key 的数据字典,在松散布局的表格数据中,稀疏矩阵只会对非空数据进行存储,而不需要对空数据开辟额外的内存空间。使用这种特殊的存储策略,使得数据片段化变得容易,可以随时框取整个数据层中的一片数据,进行序列化或反序列化。

借用这一特性,葡萄城的 SpreadJS 和 GcExcel 表格组件可以随时替换或恢复整个存储结构中的任何一个级别的节点,以改变引用的方式更高效的解决表格数据回滚和恢复问题,而这一点也为葡萄城表格组件支持多人在线协同打下了一个良好的基础。

此外,使用稀疏矩阵还带来了一个优势,葡萄城的表格组件在数据检索遍历时,无需判空,只要对有效数据校验即可快速获取想要的值。


(稀疏矩阵存储策略)

计算公式引擎

除了应用于数据展示,表格更多的使用场景是处理计算问题,尤其在面对复杂公式时,表格需要提供更为可靠的计算结果。

因此,衡量表格组件能力的一个重要指标,就是在为应用程序实现类似 Excel 的公式函数时,能否正确的解析并计算结果,而看似简单的 Excel 公式函数,却具备高阶编程语言的一切特性,如语法分析、解析、运算、执行等。

葡萄城的表格组件通过引入其自主研发的计算公式引擎,已做到兼容 450 多种 Excel 公式函数,并可轻松扩展,满足用户自定义、异步调用、跨表格引用等多场景计算需求。

表达式树

葡萄城表格组件的计算引擎依托于一种表达式树的结构类型,即当用户设置一个公式到表格中,计算引擎会将其解析为一个中缀表达式,通过计算引擎的解析后,会在内存中以树型结构进行存储,这个树型结构就是表达式树。表达式树的生成,是后续构建计算依赖链的关键。

当一个公式被解析为表达式树后,计算引擎将根据运算上下文为其构建运算依赖链。运算依赖链的目的是为了按需计算,当表格内容发生变化时,只有被影响的表达式树会进行运算,而运算的依据就是依赖链。


(葡萄城表格组件构建的公式依赖链)

如上图所示,这是葡萄城表格组件的计算引擎在构建计算依赖链时的一个简单的流程图,表达式树从计算存储模型中找到对应的根节点以及根节点标识,随后遍历整个表达式树,找出其他依赖标识,构建依赖关系。

当整个依赖链中的任意节点发生变化时,沿着这条依赖链,计算引擎会查找依赖节点并进行重算,这个过程中,没有在依赖链中的节点是不会发生重算计算的,也就是我们所说的脏值运算。

正是利用这样的机制,葡萄城的表格组件才得以大大提升了整个表格的运算速度,给用户更好的使用体验和更加精准的运算结果。

在线导入导出

SpreadJS 无需借助任何后台代码和第三方组件,便可直接在浏览器中完成 Excel、CSV、JSON 等文件的导入导出、PDF 导出、打印及预览操作。


(在线导入导出 Excel 文件)

通过 SpreadJS 提供的设计器可以快速的进行模板设计,设计器中可以通过拖拽,点击,配置等操作快速进行模板设置从而节省大量的代码编辑操作。当在设计器中设计好模板之后可以通过设计器提供的导出功能,将模板导出成 ssjson 文件(该文件就是将序列化 toJSON 之后生成 JSON 格式保存成的文件)。

在页面展示的时候我们可以在 js 中读取该文件:

例如 jquery 的 \$.getJSON(“/xxx.ssjson”)
通过 js 文件读取等方式,将获取到的 json 对象通过 spread.fromJSON 反序列化成页面展示,这样就完成了模板的快速构建。

JSON 序列化与反序列化

  • 通过序列化可以将当前的整个 Spread 序列化成为 JSON 格式进行存储
  • 通过反序列化可以将之前序列化的 JSON 格式的对象反序列化为页面进行展示

表格组件的应用价值

流畅的用户体验

SpreadJS 内置开放的 API 和类 Excel 的 UI 设计元素(如工具面板等),可实现高效的模板设计、在线编辑和数据绑定,为最终用户带来高度类似 Excel 的使用体验,使用由 SpreadJS 开发的电子表格系统,业务人员无需经过专业培训,即可快速上手。

流畅的用户体验

强大的数据分析能力

SpreadJS 和 GcExcel 均为用户提供了高效的计算引擎,并针对数据处理性能进行了优化,可满足企业各类数据计算、可视化、数据透视分析等需求,却不会过多地占用系统资源。

强大的数据分析能力

离线操作与持久化能力

使用 SpreadJS 和 GcExcel 的组件能力,可通过导出 Excel 保存表格内容、图表、富文本、单元格格式、单元格类型等信息并持久化,在后续使用时,只需取出持久化的数据,调用 fromJSON 函数即可反序列化到页面呈现。

离线操作与持久化能力

与 Excel 高度兼容

葡萄城表格组件 SpreadJS 和 GcExcel 支持超过 18 种条件格式、32 种图表、53 项单元格格式、182 种形状,以及 450 多种 Excel 计算公式,可于 Web 系统中轻松嵌入类 Excel 模块,实现如 Excel 般的数据分析和交互。

与 Excel 高度兼容

表格技术落地

SpreadJS纯前端表格控件

可嵌入您系统的在线 Excel

SpreadJS 是一款基于 HTML5 的纯前端表格控件,兼容 450 种以上的 Excel 公式,具备“高性能、跨平台、与 Excel 高度兼容”的产品特性,被中国软件行业协会认定为“中国优秀软件产品”。

SpreadJS
GrapeCity Documents for Excel

服务端高性能表格组件

GcExcel 是一款基于 Java 平台的服务端高性能表格组件,可与纯前端表格控件 SpreadJS 前后端兼容,无需依赖 Office、POI 或第三方应用软件,即可批量创建、加载、编辑、打印、导入/导出 Excel 文档。

GcExcel服务端高性能表格组件
Spread .NET表格控件

.NET 表格控件,无缝兼容 Excel

Spread .NET 是一个功能、布局与 Excel 高度类似的 .NET 表格控件,可全面满足 WinForm、ASP.NET、XAML 和 WinRT 等平台下表格数据处理、数据可视化开发需求,提供可嵌入系统的类 Excel 设计器和全面开放的 API,为 .NET 开发人员构建企业级表格应用程序提供更加专业的选择。

Spread .NET表格控件

表格技术发明专利

一种基于 HTML5 Canvas 的表格绘制方法和系统