SpreadJS 纯前端表格控件 - V16.0 Update2 新特性
甘特图插件 / GanttSheet
在新版本中,SpreadJS 新增了一个新的插件:甘特图,这是基于 SpreadJS 本身的强大电子表格能力,将生产计划、预算排期中的日程管理进行了全新可视化的展示插件,在 V16.0 Update2 版本中以 Beta 版本发布。
其数据来自与集算表同源的数据管理器(DataManager),通过绑定 -> 视图的方式,将层级化的任务数据使用此插件进行展示,如上图。
在此次版本中,甘特图插件已具备以下的能力(功能):
缩放和滚动时间刻度
任务栏和网格线的样式
布局
任务操作
日历
导入和导出
甘特图插件将在 SpreadJS v17.0 版本中实现更完整的功能。
公式编辑器 / Formula Editor
在使用电子表格的过程中,如果碰到比较复杂的公式,除了阅读困难,无法理解公式函数的计算逻辑,在编辑时也会非常困难,很容易造成公式出错。
在新版本中,SpreadJS 增加了公式编辑器的工具,帮助用户解决以上的困难,如下图:
公式编辑器具备:
公式函数格式化
调整公式的缩进、间距、换行等,使公式更易读、易于维护。
灵活的大纲视图
允许在公式编辑器中折叠和展开公式视图。
语法高亮
通过突出显示公式中的不同语法元素,提升可读性和可用性。
Lint 选项
提供错误提示,如不正确的函数参数、括号不匹配等,以减少错误。
工具提示信息
当用户悬停或输入函数时,显示包含有关函数详细信息的工具提示。
主题定制
提供多个主题,并允许自定义现有主题以改变编辑器的外观。
CSS
// Define the color of the function token
.gc-formula-editor-token-function {
color: blue;
}
// Define the color of the string token
.gc-formula-editor-token-const-string {
color: red;
}
// Define the color, background-color, and font of the formula editor
.gc-formula-editor-content {
color: black;
background-color: white;
font: 16px, sans-serif;
}
手动计算模式 / Manual Calculation Options
新版本中,SpreadJS 会在依赖值(公式中引用的单元格、值或名称)发生变化时自动更新公式。
然而,如果你希望控制何时重新计算公式,而不是在引用单元格发生变化后立即进行计算,你可以将自动计算切换为手动计算。
SpreadJS API 中的 CalculationMode 枚举允许你设置自动或手动的计算选项。
当 CalculationMode 设置为 auto 时(默认模式),SpreadJS 会在每次引用的单元格发生改变时自动计算所有被修改的单元格。例如,在剪切粘贴或输入单元格时。
需要注意的是,SpreadJS 将修改过的单元格视为脏单元格,并且需要进行重新计算。
另一方面,当 CalculationMode 设置为手动(manual) 时,SpreadJS 仅在你明确请求时计算和更新公式。
这在你有一个包含许多复杂公式的大型工作表中,并且希望避免频繁的重新计算以提高性能和响应速度时非常有用。例如,在剪切或粘贴值时,SpreadJS 会重置公式和单元格的值,但不会重新计算任何公式。
注意:SpreadJS 在导出到 Excel 时支持 CalculationMode 选项。
以下代码示例展示了如何在初始化工作簿时设置手动计算选项。
JavaScript
// Switch to manual mode when initializing the workbook.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {calculationMode: GC.Spread.Sheets.CalculationMode.manual});
// Or
spread.options.calculationMode = GC.Spread.Sheets.CalculationMode.manual;
一旦切换到手动计算模式,你需要使用 calculate()方法手动更新工作表中的公式,该方法接受 CalculationType 枚举值作为参数。
CalculationType枚举指定计算类型,其可用成员如下所示:
注意:从 SpreadJS V16.0 Update2 版本开始,已弃用了 sheet.recalcAll() 方法来重新计算单元格中的公式。你可以使用 spread.calculate() 来替代。
其他更新和增强 / Other Enhancement
计算相关
SUMIFS 和 XLOOKUP 性能优化
在新版本中,针对高频率使用的 SUMIFS 和 XLOOKUP 进一步做了性能优化,在普遍场景下有 10% ~ 30% 的提升。
输入公式时的跨工作表引用支持
在 SpreadJS 中,用户可以通过键入“=”在单元格中输入公式。
通常,用户只能使用光标选择要在该公式中引用的单元格,只要它们位于同一张工作表上即可。
在新版本中,添加了在编辑单元格公式以引用其他工作表中的单元格时单击不同工作表选项卡的功能。
工作簿增强 / Workbook Enhancement
单元格支持默认值 / DefaultValue
新版本中,在单元格对象添加了一个新属性,允许设置单元格的默认值。这将对需要对填报表单设置默认值的场景提供方便,结合单元格掩码功能,将会为表格最终用户填写表单时提供极大的方便。
通常,当单元格中没有值时,单元格将显示空白,在新版本中,可以将任何值或公式设置为单元格的默认值。也可以使用简单的 API 获取和设置默认值:
JavaScript
// 使用 defaultValue 方法设置或获取单元格的默认值/公式
activeSheet.getCell(0, 0).defaultValue(20);
console.log("使用defaultValue方法获取单元格(0,0)的默认值:" + activeSheet.getCell(0, 0).defaultValue());
activeSheet.getCell(0, 1).defaultValue("=IF(A1>10, A1*3)");
console.log("使用defaultValue方法获取单元格(0,1)的默认值:" + activeSheet.getCell(0, 1).defaultValue());
// 使用 setDefaultValue 或 getDefaultValue 方法设置或获取单元格的默认值/公式
activeSheet.setDefaultValue(0, 0, 20);
activeSheet.setDefaultValue(1, 0, 40);
console.log("使用getDefaultValue方法获取单元格(0,0)的默认值:" + activeSheet.getDefaultValue(0, 0));
activeSheet.setDefaultValue(2, 0, "=SUM(A1,A2)");
console.log("使用getDefaultValue方法获取单元格(2,0)的默认值:" + activeSheet.getDefaultValue(2, 0));
请注意,当单元格为空并且已经设置了默认值时,以下条件适用:
- 只有该单元格的默认值或默认公式将包括在重新计算中,公式优先
- 在编辑模式下,单元格显示默认值或使用默认公式重新计算的值
- 导出到 Excel 时,默认值将导出为单元格值
- 用户可以更改单元格值,但不会覆盖默认值
默认值只能针对工作表中的视口区域进行设置,但无法为整行或整列设置默认值。
日期时间单元格类型增强 / DateTime cell type
单元格中的日期时间选择器下拉菜单允许用户设置日期和时间以在单元格中填充计算结果。
以下截图说明带有下拉指示器的单元格 C5 中的日期时间选择器下拉列表。
以下图片展示了使用日期时间选择器下拉菜单进行日期范围选择的情况。
Excel 样式复制优化
SpreadJS 中的复制样式已得到增强,可以匹配 Excel。
新版本中,SpreadJS 将为单元格生成命名样式并将它们添加到 HTML 剪贴板内容的顶部,而不是为每个单元格添加相同的样式定义,从而减少命令包的大小。
集算表增强 / TableSheet Enhancement
窗口聚合函数 / Window Formula
新版本中添加的 WINDOW 函数提供集算表中的数据分析。
这些函数可以在特定窗口(与当前行相关的一组表行)上执行聚合、排名和分析计算,并为每行生成结果。可以同时使用聚合值和非聚合值。这些新函数如下:
排名功能
- CUMEDIST - 返回累积分布值
- DENSERANK - 返回当前行在其分区内的排名,没有间隙
- ROWNUMBER - 返回分区内当前行的编号
- W_PERCENTRANK - 返回排名值的百分比
- W_RANK - 返回当前行在其分区内的排名(有间隙)
分析函数
- FIRSTVALUE - 返回窗口框架第一行的参数值
- LAG - 提供对指向当前行的给定物理偏移量的行中的值的访问
- LASTVALUE - 返回窗口框架最后一行的参数值
- LEAD - 提供对当前行之后给定物理偏移量的行中的值的访问
- NTHVALUE - 返回窗口框架第 N 行的参数值
- NTILE - 返回其分区内当前行的存储桶编号
Windows 函数实现的最佳示例是运行总计(running total)。
可以使用 Windows 函数创建某些数据的运行总计,并使用 PARTITIONBY 函数等来获取每年的运行总计或类似的内容:
设计器增强 / Designer Enhancement
设定默认活动选项卡 / Default Active Ribbon Tab
新版本中对设计器组件所做的一个增强是能够在功能区中设置默认的活动选项卡。
通过在配置中设置默认的活动选项卡,该特定选项卡将在加载 SpreadJS 设计器组件时打开。
JavaScript
// Use the activeRibbonTab method of the designer component to set the active ribbon tab.
var config = GC.Spread.Sheets.Designer.DefaultConfig;
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config);
let currentActiveRibbonTab = designer.activeRibbonTab();
if (currentActiveRibbonTab !== "insert") {
designer.activeRibbonTab("insert");
}
Excel 主题、颜色和字体
我们在设计器中添加了“主题”、“颜色”和“字体”按钮,使用户可以切换主题或颜色集以影响引用这些主题颜色的所有形状、图表和内置单元格样式。
Excel 文件密码
SpreadJS 支持使用密码打开和保存 Excel 文件,我们现在已将该功能添加到文件对话框中的 SpreadJS 设计器中。
名称管理器中的只读名称
在此版本中,现在可以在名称管理器中将名称设置为只读。这可以防止您的用户更改工作簿中的特定名称。
Angular 16 支持
SpreadJS 现在支持 Angular 16 用于我们的 Angular 包装器和设计器组件。
历史版本
查看更多关于 SpreadJS 纯前端表格控件的历史版本。