Handsontable 16：全新 Angular 包装器与核心优化

Handsontable 16.0.0 现已发布，带来全新重写的 Angular 封装层、新增 textEllipsis 选项、多项底层优化以及为提升可访问性而进行的 DOM 结构调整。

 

为确保升级过程顺畅，我们已准备好详细的迁移指南。

 

新的 Angular 包装器

版本 16.0 引入了全新的 Handsontable Angular 包装器，旨在与 Angular 的最新架构标准保持一致，并提供更优质的开发体验。如果您使用的是 Angular 16 及以上版本，我们建议升级至新包装器，以享受更符合 Angular 规范的用法、更轻松的维护以及与 Angular 变更检测系统更紧密的集成。

 

新 Angular 包装器值得您进行更换，原因如下：

 

• 它基于 Angular 的组件化架构构建，因此您可以将自定义编辑器和渲染器作为标准 Angular 组件进行创建。

• 由于类型定义的改进，您将获得更强大的 TypeScript 支持。

• 包装器已重新架构为使用 Angular 的独立组件模型——不再需要 NgModules。所有公共组件均标记为 standalone: true，因此您可以直接导入它们而无需额外模块。

• 基于Angular 依赖注入构建的系统更加干净，使全局配置更易于管理。

• 模板语法更简单易读，减少了冗余代码，使配置更易于维护。

• 现可通过 ViewChild 直接访问 Handsontable 实例。

 

新封装层以 @handsontable/angular-wrapper npm 包形式发布，与旧版 @handsontable/angular 包相比引入了重大 API 变更。我们在迁移指南中已尽可能清晰地解释这些变更，以简化您的升级流程。文档中还新增了 Angular 专属章节，包含更新的示例和指导。

 

请注意，旧版 Angular 包装器 @handsontable/angular 已在版本 16 中正式废弃，并将在版本 17 中移除。

 

新textEllipsis 功能

我们引入了新的内置功能 textEllipsis，可帮助保持表格布局整洁易读，即使某些单元格包含大量文本。

 

当启用 textEllipsis 时，内容超过当前宽度限制的单元格将自动显示省略号 (...) 而不是溢出文本。此视觉提示表明存在更多内容，同时不会破坏表格的结构。

该功能开箱即用，可通过简单设置启用：textEllipsis as true。

 

您可以将其应用于： l

·全局应用至整个表格 l

·应用至特定行 l

·或单个单元格，具体取决于您的布局需求

 

第二次单击取消选择单元格

现在，您可以选择多个单元格，然后按住 Ctrl/Cmd 并单击任意选定单元格即可将其从选择中移除。 

以前，此行为需要自定义实现。现在，它已原生支持，并默认为所有用户启用。

 

更新的 DOM 结构

我们修改了底层 DOM，以改进对屏幕阅读器的支持，并为未来功能预留容量，如分页工具条。结构变化包括一个额外的 <div> ，其中包含整个数据网格。

 

新结构如下所示：

其他变更

在此版本中，我们还解决了一些浏览器特定的问题。我们移除了在 Windows 上使用分数显示缩放时下拉编辑器中出现的水平滚动条。在 Safari 中，我们修复了滚动条样式不一致的问题，以确保跨浏览器的统一UI。

 

您还将受益于改进的过滤器行为。在活动过滤器会话期间添加新列现在可以正确更新过滤器，避免出现不一致的结果。

 

发行说明

新增 l

• 重大变更：在上下文菜单和下拉菜单中添加了焦点轮廓。#11669 l
• 改进了 Handsontable 编辑器定位。#11593 l
• 添加了第二次单击单元格取消选择功能。#11602 l
• 添加了新的 textEllipsis 选项。#11609 l
• 添加了对重命名 CSS 变量的向后兼容性。#11676 l
• Angular：引入了一个新的 Angular 包装器 - @handsontable/angular-wrapper。 #11511

 

已更改 l

• 重大变更：更新 CSS 主题变量并添加 --ht-radio-* 变量。#11470 l
• 重大变更：将 modifyData 钩子更改为对行和列使用可视化索引。#11501

 

已修复 l

• 重大变更：修复了自定义边框与行标题重叠的问题。#11551 l
• 重大变更：修复了可访问性问题，并引入了带有包装器和门户的新 DOM 结构。#11579 l
• 修复了下拉编辑器在 Windows 上应用小数缩放时出现水平滚动条的问题。#11613 l
• 修复了 Safari 浏览器上滚动条样式的问题。#11614 l
• 修复了添加新列时列过滤器的行为。#11616 l
• 修复了下拉元素颜色的问题。 #11661 l
• Angular：修复了错误 this.hotInstance.getSettings(...).columns?.filter 不是 angular-wrapper 中的函数。#11695

 

如果您对此更新有任何疑问，请使用以下支持渠道之一： l

• 阅读我们文档中的更新日志 l
• 在开发者论坛上发起讨论 l
• 在 Stack Overflow 上提问 l
• 在 GitHub 讨论区报告问题