Handsontable 16.0.0 現(xiàn)已發(fā)布，帶來全新重寫的 Angular 封裝層、新增 textEllipsis 選項(xiàng)、多項(xiàng)底層優(yōu)化以及為提升可訪問性而進(jìn)行的 DOM 結(jié)構(gòu)調(diào)整。

為確保升級過程順暢，我們已準(zhǔn)備好詳細(xì)的遷移指南。

新的 Angular 包裝器

版本 16.0 引入了全新的 Handsontable Angular 包裝器，旨在與 Angular 的最新架構(gòu)標(biāo)準(zhǔn)保持一致，并提供更優(yōu)質(zhì)的開發(fā)體驗(yàn)。如果您使用的是 Angular 16 及以上版本，我們建議升級至新包裝器，以享受更符合 Angular 規(guī)范的用法、更輕松的維護(hù)以及與 Angular 變更檢測系統(tǒng)更緊密的集成。

新 Angular 包裝器值得您進(jìn)行更換，原因如下：

• 它基于 Angular 的組件化架構(gòu)構(gòu)建，因此您可以將自定義編輯器和渲染器作為標(biāo)準(zhǔn) Angular 組件進(jìn)行創(chuàng)建。

• 由于類型定義的改進(jìn)，您將獲得更強(qiáng)大的 TypeScript 支持。

• 包裝器已重新架構(gòu)為使用 Angular 的獨(dú)立組件模型——不再需要 NgModules。所有公共組件均標(biāo)記為 standalone: true，因此您可以直接導(dǎo)入它們而無需額外模塊。

• 基于Angular 依賴注入構(gòu)建的系統(tǒng)更加干凈，使全局配置更易于管理。

• 模板語法更簡單易讀，減少了冗余代碼，使配置更易于維護(hù)。

• 現(xiàn)可通過 ViewChild 直接訪問 Handsontable 實(shí)例。

新封裝層以 @handsontable/angular-wrapper npm 包形式發(fā)布，與舊版 @handsontable/angular 包相比引入了重大 API 變更。我們在遷移指南中已盡可能清晰地解釋這些變更，以簡化您的升級流程。文檔中還新增了 Angular 專屬章節(jié)，包含更新的示例和指導(dǎo)。

請注意，舊版 Angular 包裝器 @handsontable/angular 已在版本 16 中正式廢棄，并將在版本 17 中移除。

新textEllipsis 功能

我們引入了新的內(nèi)置功能 textEllipsis，可幫助保持表格布局整潔易讀，即使某些單元格包含大量文本。

當(dāng)啟用 textEllipsis 時(shí)，內(nèi)容超過當(dāng)前寬度限制的單元格將自動顯示省略號 (...) 而不是溢出文本。此視覺提示表明存在更多內(nèi)容，同時(shí)不會破壞表格的結(jié)構(gòu)。

該功能開箱即用，可通過簡單設(shè)置啟用：textEllipsis as true。

您可以將其應(yīng)用于： l

·全局應(yīng)用至整個(gè)表格 l

·應(yīng)用至特定行 l

·或單個(gè)單元格，具體取決于您的布局需求

第二次單擊取消選擇單元格

現(xiàn)在，您可以選擇多個(gè)單元格，然后按住 Ctrl/Cmd 并單擊任意選定單元格即可將其從選擇中移除。 

以前，此行為需要自定義實(shí)現(xiàn)?，F(xiàn)在，它已原生支持，并默認(rèn)為所有用戶啟用。

更新的 DOM 結(jié)構(gòu)

我們修改了底層 DOM，以改進(jìn)對屏幕閱讀器的支持，并為未來功能預(yù)留容量，如分頁工具條。結(jié)構(gòu)變化包括一個(gè)額外的 <div> ，其中包含整個(gè)數(shù)據(jù)網(wǎng)格。

新結(jié)構(gòu)如下所示：

其他變更

在此版本中，我們還解決了一些瀏覽器特定的問題。我們移除了在 Windows 上使用分?jǐn)?shù)顯示縮放時(shí)下拉編輯器中出現(xiàn)的水平滾動條。在 Safari 中，我們修復(fù)了滾動條樣式不一致的問題，以確?？鐬g覽器的統(tǒng)一UI。

您還將受益于改進(jìn)的過濾器行為。在活動過濾器會話期間添加新列現(xiàn)在可以正確更新過濾器，避免出現(xiàn)不一致的結(jié)果。

發(fā)行說明

新增 l

• 重大變更：在上下文菜單和下拉菜單中添加了焦點(diǎn)輪廓。#11669 l
• 改進(jìn)了 Handsontable 編輯器定位。#11593 l
• 添加了第二次單擊單元格取消選擇功能。#11602 l
• 添加了新的 textEllipsis 選項(xiàng)。#11609 l
• 添加了對重命名 CSS 變量的向后兼容性。#11676 l
• Angular：引入了一個(gè)新的 Angular 包裝器 - @handsontable/angular-wrapper。 #11511

已更改 l

• 重大變更：更新 CSS 主題變量并添加 --ht-radio-* 變量。#11470 l
• 重大變更：將 modifyData 鉤子更改為對行和列使用可視化索引。#11501

已修復(fù) l

• 重大變更：修復(fù)了自定義邊框與行標(biāo)題重疊的問題。#11551 l
• 重大變更：修復(fù)了可訪問性問題，并引入了帶有包裝器和門戶的新 DOM 結(jié)構(gòu)。#11579 l
• 修復(fù)了下拉編輯器在 Windows 上應(yīng)用小數(shù)縮放時(shí)出現(xiàn)水平滾動條的問題。#11613 l
• 修復(fù)了 Safari 瀏覽器上滾動條樣式的問題。#11614 l
• 修復(fù)了添加新列時(shí)列過濾器的行為。#11616 l
• 修復(fù)了下拉元素顏色的問題。 #11661 l
• Angular：修復(fù)了錯誤 this.hotInstance.getSettings(...).columns?.filter 不是 angular-wrapper 中的函數(shù)。#11695

如果您對此更新有任何疑問，請使用以下支持渠道之一： l

• 閱讀我們文檔中的更新日志 l
• 在開發(fā)者論壇上發(fā)起討論 l
• 在 Stack Overflow 上提問 l
• 在 GitHub 討論區(qū)報(bào)告問題