
Handsontable 16.0.0 現已發(fā)布,帶來全新重寫的 Angular 封裝層、新增 textEllipsis 選項、多項底層優(yōu)化以及為提升可訪問性而進行的 DOM 結構調整。
為確保升級過程順暢,我們已準備好詳細的遷移指南。
新的 Angular 包裝器
版本 16.0 引入了全新的 Handsontable Angular 包裝器,旨在與 Angular 的最新架構標準保持一致,并提供更優(yōu)質的開發(fā)體驗。如果您使用的是 Angular 16 及以上版本,我們建議升級至新包裝器,以享受更符合 Angular 規(guī)范的用法、更輕松的維護以及與 Angular 變更檢測系統(tǒng)更緊密的集成。
新 Angular 包裝器值得您進行更換,原因如下:
• 它基于 Angular 的組件化架構構建,因此您可以將自定義編輯器和渲染器作為標準 Angular 組件進行創(chuàng)建。
• 由于類型定義的改進,您將獲得更強大的 TypeScript 支持。
• 包裝器已重新架構為使用 Angular 的獨立組件模型——不再需要 NgModules。所有公共組件均標記為 standalone: true,因此您可以直接導入它們而無需額外模塊。
• 基于Angular 依賴注入構建的系統(tǒng)更加干凈,使全局配置更易于管理。
• 模板語法更簡單易讀,減少了冗余代碼,使配置更易于維護。
• 現可通過 ViewChild 直接訪問 Handsontable 實例。
新封裝層以 @handsontable/angular-wrapper npm 包形式發(fā)布,與舊版 @handsontable/angular 包相比引入了重大 API 變更。我們在遷移指南中已盡可能清晰地解釋這些變更,以簡化您的升級流程。文檔中還新增了 Angular 專屬章節(jié),包含更新的示例和指導。
請注意,舊版 Angular 包裝器 @handsontable/angular 已在版本 16 中正式廢棄,并將在版本 17 中移除。
新textEllipsis 功能
我們引入了新的內置功能 textEllipsis,可幫助保持表格布局整潔易讀,即使某些單元格包含大量文本。
當啟用 textEllipsis 時,內容超過當前寬度限制的單元格將自動顯示省略號 (...) 而不是溢出文本。此視覺提示表明存在更多內容,同時不會破壞表格的結構。

該功能開箱即用,可通過簡單設置啟用:textEllipsis as true。
您可以將其應用于: l
·全局應用至整個表格 l
·應用至特定行 l
·或單個單元格,具體取決于您的布局需求
第二次單擊取消選擇單元格
現在,您可以選擇多個單元格,然后按住 Ctrl/Cmd 并單擊任意選定單元格即可將其從選擇中移除。

以前,此行為需要自定義實現?,F在,它已原生支持,并默認為所有用戶啟用。
更新的 DOM 結構
我們修改了底層 DOM,以改進對屏幕閱讀器的支持,并為未來功能預留容量,如分頁工具條。結構變化包括一個額外的 <div> ,其中包含整個數據網格。
新結構如下所示:

其他變更
在此版本中,我們還解決了一些瀏覽器特定的問題。我們移除了在 Windows 上使用分數顯示縮放時下拉編輯器中出現的水平滾動條。在 Safari 中,我們修復了滾動條樣式不一致的問題,以確??鐬g覽器的統(tǒng)一UI。
您還將受益于改進的過濾器行為。在活動過濾器會話期間添加新列現在可以正確更新過濾器,避免出現不一致的結果。
發(fā)行說明
新增 l
已更改 l
已修復 l
如果您對此更新有任何疑問,請使用以下支持渠道之一: l