华为公司网站建设相关内容/百度关键词优化企业

SpreadJS 纯前端表格控件 - V16.0 新特性--内容摘自互联网

新文件结构是 SpreadJS 近几个版本中最为重要的架构级更新。这种新文件结构可以大大提高导入大型 Excel 文件的性能，同时在保存时创建更小、优化更好的文件。

在 V15.0 及更早的版本中，SpreadJS 需要先导出 SSJSON ，再导出 Excel 的 xlsx 文档。新的文件格式可以直接将数据转换为模型。生成的数据被保存到一个压缩的 .sjs 文件中，使其类似于 Excel 自身的 XML 结构。这种格式让 ExcelIO 的进程更快、更轻量。

 

导出文件性能对比（单位：毫秒） 

集算表（TableSheet）增强
SpreadJS 集算表（TableSheet）是一个具备数据绑定功能、公式计算能力的高性能数据表格，提供排序、筛选、样式、行列冻结、自动更新、单元格更新等能力。集算表在 V16.0 中获得了更多功能：

1、关系数据管理器（DataManager）中的层级数据
TableSheets 现在支持源数据中的层级结构数据。这包括四种不同类型的记录数据：

属性“id”和“parentId”

 

指示层级结构级别的属性

 

包含分层子集的属性

 

可以通过自定义函数解析为层级结构的，包含主键的数据

 

配置父子层次结构类型代码示例：

 

还添加了层级结构操作，使用户能够：

升级/降级记录
向上/向下移动记录
在之后/之前或之上/之下插入记录
删除一条记录
展开/折叠所有记录级别或特定级别
排序/过滤记录

 

2、关系数据管理器（DataManager）字段名称映射

关系数据管理器（DataManager）的数据源模式现在支持为列设置别名，允许数据源的前端和后端之间使用不同的名称。这可以通过在向 DataManager 添加视图时简单地设置“caption”属性来完成。如图：

 

设计器（Designer）增强
我们对 SpreadJS 的设计器组件进行了增强，包括本博客前面 TableSheet 部分的一些相应功能：

1、集算表（TableSheet）模板和面板增强

当集算表最初被添加到 SpreadJS 时，我们在设计器中添加了一个面板来管理 TableSheets。在 V16.0 中使用列列表中的关系数据时，可以进行折叠特定列的操作。此外，用户可以单击关系列以显示该特定列的详细信息。在工作簿中选择集算表时，此功能也适用于设计器右侧的集算表面板。其他功能包括分组和拖动字段。

 

2、集算表（TableSheet）层次结构数据

设计器中有关集算表（TableSheet） 的另一个增强，是在数据源的“列”选项卡中添加了对分层数据的支持。列现在有一个单独的“层次结构”部分，其中包含可以定义的类型、聚合公式和分组列：

 

这些选项可以按如下方式使用：

类型 - 定义为 Parent、ChildrenPath 或 Level
汇总公式 - 输入指定列的层级汇总公式
大纲列 - 自定义列的显示，指定是否包括复选框、图像或指示器
3、在选择区域中执行查找/替换

在大型工作表中搜索特定数据时，您可能只想搜索选中区域的单元格内容。在 V16.0 中，我们添加了对查找和替换功能的增强，支持了仅在选中区域的单元格中进行搜索。

 

4、格式面板

新的格式窗格按钮让用户可以快速打开形状、图片和图表的侧边栏。

 

计算增强
无效的公式输入行为和样式

SpreadJS 会自动识别无效的公式，并在用户尝试提交时显示错误。在 V15.0 及更早版本中，如果公式无效，输入的内容会被自动删除。在 V16.0 版本中，我们添加了对应的可选项，支持将输入错误的公式保留在单元格中以便用户修正，当我们设置 AllowInvalidFormula 选项设置为 true 时，输入的错误公式将被转换为文本并保留：

spread.options.allowInvalidFormula = true;

设计器配置方法：

 

代码配置方法：

通过此增强功能，我们还添加了专门针对无效公式的单元格状态。这意味着您可以实现自动标记具有无效公式的单元格并将样式应用于这些特定单元格。

 

形状增强
1、类 Excel 的表单控件（Form Controls）

为了更轻松地在 SpreadJS 中创建您自己的表单，我们添加了一些基于 SpreadJS 形状的有用的类似 Excel 的表单控件。这些控件包括：

按钮（Buttons）
微调按钮（Spin Buttons）
列表框（List Boxes）
组合框（Combo Boxes）
复选框（Check Boxes）
选项按钮（Option Buttons）
分组框（Group Boxes）
标签（Labels）
滚动条（Scrollbars）

 

通过指定表示控件位置和大小的 addFormControl 方法的 left、top、width 和 height 参数，可以将这些控件放置在工作表中的任何位置。一旦设置了位置和大小并创建了控件，它就可以绑定到特定的单元格，例如上面屏幕截图中的年龄微调按钮。此外，还添加了一个名为 FormControlValueChanged 的新事件，以便在表单控件的值发生变化（UI 操作、API 调用或关联的单元格发生变化）时触发。

2、调整大小（Resizing）增强

开发人员现在可以限制或允许不同类型的形状调整大小。这些类型包括纵横比、水平和垂直调整大小，可以使用 API“allowResize”进行设置。

 

3、Shift+鼠标调整大小行为

当 allowResize 在工作表中设置为 true 时，可以在使用鼠标调整形状大小时按住 shift 键以保持形状的纵横比。 

工作簿（Workbook）增强
我们对 SpreadJS 的工作簿功能做了一些增强：

1、复制/剪切取消事件

复制和剪切事件已得到增强以提供剪贴板的当前状态。这有助于在复制/剪切/粘贴过程的某些阶段实现特定功能，并向以下事件添加额外的参数：

ClipboardChanging
ClipboardPasting
ClipboardPasted
2、单元格装饰样式

我们的样式实现已得到增强，包括单元格装饰。包括：

遮角样式
边角样式
图标（位置、图标和颜色）

3、数据验证（Data Validation）的自定义样式

数据验证可用于标记非法的单元格数据或防止输入特定数据。V16.0 可以为该验证设置样式，但对于此版本，我们添加了为数据验证设置自定义样式的功能。

 

4、在 EditEnding 和 EditEnded 事件中取消输入

EditEnding 和 EditEnded 事件发生在用户在单元格中输入或更改数据之后。在 V16.0 版本中，我们添加了一个取消参数，以便开发人员可以在需要时取消编辑。