名称对话框组件化 / Name Box Component

SpreadJS 的名称框组件用于显示选定的范围、项目、命名范围,并在电子表格中创建和导航到自定义名称。 名称框有几个功能:

用户可以在名称框中输入文本

  • 如果文本无法解析为范围,SpreadJS 将为选定的单元格创建一个自定义名称
  • 如果文本可以解析为范围,SpreadJS 会将这些范围作为选择添加到工作表中
  • 如果文本可以解析为范围但这些范围不在同一个工作表中,则会显示警告
  • 如果文本无法解析为范围并且不是有效的自定义名称,则会显示警告

用户可以选择单元格范围

  • 如果所选区域已与自定义名称关联,则名称框将显示该名称

此功能已经存在于设计器中,但在此版本中,我们将其分离到自己的组件中,可以在没有 SpreadJS 设计器的情况下单独使用。

工作簿(工作表)增强

1、新增 DataObject 单元格类型

在此版本中,添加了一种新的单元格类型,以帮助以 DataObject 单元格类型的形式呈现数据。 这意味着您可以拥有绑定到数据的特殊单元格,并且选择数据对象的不同属性非常容易。 当单元格值为对象且单元格类型设置为 DataObject 时,单元格按钮将自动添加到单元格中:

单击此按钮后,将打开一个下拉列表,如果单元格值是嵌套对象,则会有一个级联下拉列表:

当用户从该列表中选择一个项目时,所选项目的值将被提取并显示在右侧相邻的空单元格中:

2、切片器更新

当我们第一次在 SpreadJS 中实现切片器时,它们是使用 DOM 元素制作的。 在此版本中,我们增强了使用形状构建的切片器,使我们能够在不久的将来实现更易于使用的切片器功能,例如 Table Slicer Multi-Select 等。

3、表格切片器支持多选

使用此功能,用户可以在表格切片器中选择某些项目,而不仅仅是一个或所有项目。

4、选中区域内导航增强

此增强功能侧重于导航选定的单元格。以前,SpreadJS 会在选择多个单元格、输入数据然后按 Enter 移动到下一个单元格时取消选择。我们已对此进行了更改以匹配 Excel 行为,因此现在不会删除选择:

5、悬停状态支持在不同区域设置不同样式

以前,您可以为工作表中的单元格区域定义悬停样式,以便当用户悬停在该行上时,它会显示一个样式:

通过此增强功能,现在可以为多个范围设置不同的悬停样式:

6、InvalidOperation 事件增强

InvalidOperation 事件在用户执行特定的无效操作时触发,例如:

  • 无效的工作表名称更改
  • 更改数组公式的一部分
  • 设置无效公式

此事件现在将针对更多无效的用户交互触发:

  • 尝试输入锁定的单元格
  • 双击锁定的单元格
  • 切割锁定的单元格

图片形状增强与重构

SpreadJS 的图片功能目前支持很多特性,包括边框、背景颜色和拉伸。 在此版本中,我们添加了更多图片自定义选项,包括:

  • Brightness
  • Contrast
  • Recolor
  • Crop
  • Transparency
  • Geometry Types

除了这些新选项之外,我们还在 SpreadJS 设计器中添加了图片格式选项卡,因此您的用户可以使用 SpreadJS 设计器组件或您的开发人员使用 SpreadJS 设计器桌面应用程序来利用这些新选项。

计算引擎增强

1、跨文件引用增强

在 v15 的第一个服务包版本中添加了跨工作簿公式支持。 在此版本中,我们以 getExternalReferences 函数的新 includeItemDetail 参数的形式添加了有关源引用和目标引用的更多信息,它允许开发人员实际获取特定文件的特定目标行、列和源范围以了解 确切地说,特定引用来自哪些单元格。

2、新公式与函数(与 Excel 兼容)

文本操作相关

3 个新的文本操作功能包括:

  • TEXTBEFORE - 返回分隔符之前的文本
  • TEXTAFTER - 返回分隔符之后的文本
  • TEXTSPLIT - 使用分隔符将文本分割成行或列

数组操纵相关

11 个新的数组操作函数包括:

  • VSTACK - 垂直堆叠数组
  • HSTACK - 水平堆叠数组

  • TOROW - 将数组作为一行返回
  • TOCOL - 将数组作为一列返回
  • WRAP ROWS - 将行数组包装成二维数组
  • WRAP COLS - 将列数组包装成二维数组

  • TAKE - 从数组开始或结束返回行或列
  • DROP - 从数组开始或结束删除行或列
  • CHOOSEROWS - 从数组中返回指定的行
  • CHOSECOLS - 从数组中返回指定的列
  • EXPAND - 将数组扩展到指定的维度

3、关系数据显示,支持公式

新版本还实现了一个有助于显示对象关系值的公式。 例如,假设您有一个名为“Customer”的对象,它具有以下属性:

  • Name
  • ID
  • CompanyName

您现在可以使用如下语法在单元格中引用这些单独的项目:

    
[code]
=[@customer.CompanyName]
[/code]
    

集算表增强

1、无需更新页面的数据更新

在我们最初的 TableSheet 实现中,需要刷新页面才能从连接的数据源更新 TableSheet。 在此版本中,可以通过 DataManager 表和视图级别的新 fetch 方法更新数据而无需刷新页面。 调用它将从数据源中获取数据并更新相关的 TableSheets。

2、获取修改信息

我们现在添加了一个 getChanges 方法来以编程方式获取 TableSheet 中已更改的项目。 这个新方法返回一个包含以下信息的对象数组:

  • 更改类型 - 自动同步模式的更新或插入,沐浴模式的更新、插入或删除
  • 数据项 - 当前行数据
  • 旧数据项 - 原始行数据(可选)
  • Index - TableSheet 视图索引

3、无数据场景下加载集算表

SpreadJS TableSheets 现在支持在不包含 TableSheet 数据的情况下保存模板,然后使用上述表格的 fetch 方法在不同的时间加载该数据。 这实质上让开发人员无需在最初指定数据的情况下创建 TableSheet,然后在稍后加载数据,例如当数据更改时。 这看起来像这样:

    
[code]
// 1. Invoke the Workbook's fromJSON method
spread.fromJSON(spreadJson);
 
// 2. Update table options
let myTable = spread.dataManager().tables["myTable"];
myTable.options = {
    remote: {
        read: function () {
            return Promise.resolve(dataSource);
        }
    }
};
 
// 3. Invoke the table's fetch then setDataView
myTable.fetch().then(function() {
    let myView = myTable.views["myView"];
    let sheet = spread.getActiveSheetTab();
    sheet.setDataView(myView);
});
[/code]
       
    

4、ComboBox/MultiColumn 单元格显示字典字段

SpreadJS TableSheets 中的查找列是在数据模式中标记为“查找”的列,用于支持跨列计算。 在此版本中,这些查找列可以根据数据架构自动更改单元格类型:

  • 以数组形式查找列 - 组合框单元格类型
  • 关系查找 - 多列列表
  • 查找中的关系和列选项 - 具有指定列的多列

透视表支持对数据字段编辑

默认情况下,SpreadJS 中的数据透视表中的单元格无法编辑,只能编辑数据透视范围,就像 Excel 一样。 在此版本中,最终用户现在能够编辑数据透视表单元格值,然后更新和重新加载数据透视表的数据源以反映更改。 对于开发人员,这是通过一个名为的属性启用的。

前端框架新版本支持

SpreadJS 现在包括对最新版本的 React 18 和 Angular 14 的支持。

历史版本

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