全新设计的集算表 / TableSheet

集算表 (TableSheet)是一个具备高性能渲染、数据绑定功能、公式计算能力的数据表格,通过全新构建的关系型数据管理器结合结构化公式,在高性能表格的基础上提供排序、筛选、样式、行列冻结、自动更新、单元格更新等功能。

集算表的出现,不但可以将表格作为数据库使用,保存大量结构化数据,还支持后端加载和原始数据回写,以此实现实时分析、处理,以及跨数据源计算和数据再加工等功能。借助这些功能,集算表非常适用于开发企业预算系统、财务系统,以及针对这些系统的数据分析、可视化展示、快速绑定、在线编辑等场景的搭建。

SpreadJS 全新设计的集算表(TableSheet)功能,除了提供排序、筛选、样式、行和列置顶以及单元格编辑等 WorkSheet 基础功能之外,还提供了关系数据管理、结构化公式和数据分组等实用功能,具体列表如下所示:

集算表应对的问题:

  • 表格存在大量结构化数据(需要将表格作为数据库使用)
  • 加载后端数据到表格中,并进行分析、处理
  • 实际分析数据需要来自多个数据表(源)
  • 对原始数据的再加工(修改、计算等)
  • 原始数据的回写

集算表适用的场景:

  • 全面预算系统
  • 企业财务系统
  • 数据分析及可视化展示
  • 快速数据绑定及编辑

数据透视表增强 / PivotTable Enhancement

SpreadJS 的数据透视表增加了计算项的概念,该概念将原始的统计数据使用公式进行纵向计算得到结果,即增加一行计算得到的结果(相对应有一个“计算字段”的概念,会增加一列计算得到的结果)。

以下图为例,Raw Data 为原始的数据透视结果:

当增加计算项并进行单独分组后,可以看到在 Analysis Results 分组内,添加了三行计算项:Outstanding Orders 、Total Order和Order Proportion。

  • Outstanding Orders:每个产品中尚未交付的订单总数(=OrderStatus[Canceled] + OrderStatus[Backorder] + OrderStatus[Pending]),即订单前三种未交付状态的总量
  • Total Order:每个产品的所有订单总数(=OrderStatus['Outstanding Orders'] + OrderStatus[Shipped]")即订单四种状态的总量
  • Order Proportion:每种产品的未发货订单总数占订单总数的比例

除了计算项,SpreadJS 的数据透视表还支持切片器、行与列的数字格式以及筛选对话框的搜索功能,如下图所示:


(SpreadJS 支持切片器)


(SpreadJS 的行与列支持数字格式)


(SpreadJS 的筛选对话框支持搜索)

打印增强 / Print & Preview

在本次 SpreadJS 的新版本中,可以通过表格编辑器直接设置与打印相关的页面参数,如下图所示:

除了可设置相关参数,表格编辑器的打印预览页面也做了全新的设计:

除了上述功能,SpreadJS 还支持对首页、奇偶页进行不同的页眉页脚设置,如下图所示:

公式与函数 / Formula & Function

SpreadJS 新增了可编程的 LAMBDA表达式函数,该函数允许使用 Excel 自己的公式语言定义自定义函数。

语法如下:

    
=LAMBDA([parameter1, parameter2, …,] calculation)
    

其中,parameter1, parameter2 等参数是可选的,表示要传递给函数的值,例如单元格引用、字符串或数字;最多可以输入 253 个参数。

calculation 表示要执行并作为函数结果返回的公式,必须为最后一个参数,且必须返回一个结果。

使用该函数,可以直接在单元格中输入公式,如:

    
=LAMBDA(number,number+1)(1)
    

如下图,计算结果为2。

在此公式中,number 值即为 1,计算结果为” number+1“,即 “1+1”,所以最终结算结果为 2。

将上述 LAMBDA 函数添加到名称管理器,然后在单元格中使用:

    
spread.addCustomName("PlusOne", "LAMBDA(n, n + 1)", "");
sheet.setFormula(1, 0, 'PlusOne(1)'); // 计算结果为2
    

除了 LAMBDA 函数,SpreadJS 还引入了ASC 和 DBCS 函数。

ASC函数:对于双字节字符集 (DBCS) 语言,该函数将全角(双字节)字符转换成半角(单字节)字符。

DBCS函数:将字符串中的半角(单字节)字符转换为全角(双字节)字符,在日语和德语语言包中,此函数名称为 JIS。

工作簿与工作表 / Workbook & Worksheet

SpreadJS 新版本中支持对命名样式启用“启用”标志,如下方代码所示:

SpreadJS 还支持自定义格式中按颜色索引,如下图:

此外,关于计算公式的使用“细节”,SpreadJS 还增加了将加减号作为公式输入开始的功能,借助 FormulaTextBox 编辑器,可以帮助用户轻松编写公式。该编辑器支持以加号(+)开始写公式,这样 Excel 用户在使用中,不必改变他们原本的使用习惯。

这个功能将会对某些会计类的项目有很大的提升,这些用户的操作习惯是按下加号(+)再输入公式,因此他们可以不用改变自己在 Excel 的习惯去适应 SpreadJS。

界面与行为 / UI & Behavior

在 SpreadJS 新版本中,添加了“跨列居中”的对齐方式。

跨列居中的实现策略为:当一个范围被设置为“跨列居中”时,每个单元格将继续向右寻找对齐方式为“跨列居中”且值为空的连续单元格,最后将其内容放在所有单元格的中心。

同时,SpreadJS 还支持上下文菜单的滚动样式,当上下文菜单过多时,使用滚动样式来展示全部菜单项。

接口相关 / API

用户在做协同编辑的需求时,为了解决冲突等问题,需要在复制粘贴或剪切粘贴时对粘贴数据的来源进行判断,如判断当前粘贴对象是通过复制还是剪切操作获取、某些粘贴内容来自当前 sheet 还是来自同一个工作簿的其他 sheet 等,为此,SpreadJS V15.0 对复制粘贴功能进行了增强。

对 ClipboardPasted 和 ClipboardPasting 事件增加了三个参数:

  • fromSheet //粘贴区域的源表
  • fromRange //复制或剪切的数据区域的源区域
  • isCutting //用来表示是否为剪切操作

表格编辑器相关 / Designer

SpreadJS V15.0 在表格编辑器中增加了分列功能,其操作和 Excel 一致:

此外,SpreadJS 还在表格编辑器中增加了“删除重复值”功能:

最后,SpreadJS V15.0 为了使表格编辑器的布局更加简洁易用,在 UX 上做了以下优化:

  • 组标题字体缩小,空间调整:

  • 将单元格类型和单元格下拉框合并到CellEditors(单元格编辑)菜单中,并将其移动到“样式”组:

历史版本

查看更多关于 SpreadJS 纯前端表格控件的历史版本。