更新：使用Handsontable 11.0.1，它修復了11.0.0中發(fā)現(xiàn)的Angular UMD包中的一個退步。
我們剛剛發(fā)布了Handsontable 11.0.0.這個版本為框架包裝器增加了模塊化功能，改進了monorepo結(jié)構(gòu)，增加了一個新的locale選項，等等。
模塊化是一種很好的方式，可以專注于對你重要的功能，定制你的網(wǎng)格，并減少你的應用程序的大小。
自從Handsontable 8.3.0以來，你已經(jīng)能夠在Handsontable的vanilla JavaScript版本中使用模塊?，F(xiàn)在，你也可以在Handsontable的每個框架版本（React、Angular和Vue）中使用模塊。
雖然這對我們所有的React、Angular和Vue用戶來說是個好消息，但這也是一個突破性的變化，因為你現(xiàn)在需要導入你想要使用的每個模塊。例如，要導入UndoRedo插件的模塊：
// import the `handsontable/base` module
import Handsontable from 'handsontable/base';
// import the `UndoRedo` module and the `registerPlugin()` function
import {
registerPlugin,
UndoRedo,
} from 'handsontable/plugins';
// register the `UndoRedo` module
registerPlugin(UndoRedo);
對模塊化不感興趣？不要害怕：我們還引入了新的方法，讓你一次性導入和注冊一個特定類別的所有模塊。
要了解更多關(guān)于Handsontable的模塊，請看我們的文檔。
要了解如何在你的框架中使用模塊，請看其中的一個指南：
自從我們在Handsontable 8.3.0中引入模塊化后，我們想讓每個模塊都能完全支持TypeScript。
為了實現(xiàn)這一目標，我們決定刪除龐大的、涵蓋所有TypeScript定義的文件（以前位于根目錄：./handsontable.d.ts）。取而代之的是，我們用一組整齊的小文件（現(xiàn)在位于一個新的目錄：./handsontable/types）取代它，專門用于Handsontable的各個部分。
因此，我們仔細檢查并修改了幾乎所有的Handsontable的類型定義。為什么這很重要？有幾個原因：
從TypeScript用戶的角度來看，如果你導入整個Handsontable庫，一切都會保持不變。所有的類型定義都在導入Handsontable包時被加載。
import Handsontable from 'handsontable';
新的事情是，現(xiàn)在，當你導入個別模塊時，類型定義也會自動加載，例如：
import Handsontable from 'handsontable/base';
import { registerPlugin, HiddenRows } from 'handsontable/plugins';
const hiddenRows = Handsontable.plugins.HiddenRows;
在 Handsontable 8.3.2 中，我們將所有 Handsontable 版本（JavaScript、Angular、React 和 Vue）放在一個單一的單一存儲庫中。
現(xiàn)在，為了更輕松地管理 monorepo，并為 Snyk 或 npm-audit 等第三方工具添加更好的支持，我們將 Handsontable 的主要 JavaScript 包放置在其自己的專用工作區(qū)中。 我們將它從根目錄移動到一個新的子目錄：./handsontable，將它放置在與框架包裝器相同的級別：
|
前： |
后： |
關(guān)于構(gòu)建如果您計劃為 Handsontable 的存儲庫做出貢獻，或者您在本地構(gòu)建自己的 Handsontable 版本，則此更改可能會影響您。 除此之外，它不應以任何方式影響您的應用程序。
了解 Handsontable 的構(gòu)建過程概覽。
Handsontable 存儲庫 （打開新窗口）是一個 monorepo （打開新窗口），其中包含以下項目：
|
項目 |
位置 |
描述 |
|
handsontable |
./handsontable |
Main Handsontable project |
|
@handsontable/angular |
./wrappers/angular |
Angular wrapper |
|
@handsontable/react |
./wrappers/react |
React wrapper |
|
@handsontable/vue |
./wrappers/vue |
Vue 2 wrapper |
所有項目都在同一版本號下一起發(fā)布。 但是每個項目都有自己的構(gòu)建和測試流程。
構(gòu)建過程將位于 ./handsontable/src/ 目錄中的源文件轉(zhuǎn)換為以下輸出文件：
不要修改上面提到的輸出文件。 相反，在 ./handsontable/src/ 目錄中進行更改，然后運行選定的構(gòu)建。 如果您想通過拉取請求將更改貢獻回 Handsontable，這一點尤其重要。
Handsontable 構(gòu)建過程需要：
每個 Handsontable 項目都有自己的構(gòu)建過程，定義在自己的 package.json 文件中。 除此之外，根目錄也有自己的 package.json 文件：
|
文件 |
保持構(gòu)建任務： |
|
./package.json |
- 一次所有包 |
|
./handsontable/package.json |
JavaScript包 |
|
./wrappers/angular/package.json |
Angular包 |
|
./wrappers/react/package.json |
React包 |
|
./wrappers/vue/package.json |
Vue包 |
要運行您的第一個構(gòu)建：
您可以一次構(gòu)建所有包，也可以單獨構(gòu)建每個包。
要一次構(gòu)建所有包：
該腳本構(gòu)建以下包：
要構(gòu)建 JavaScript 包：
從根目錄構(gòu)建 JavaScript 包：
在 ./handsontable 目錄中，您還可以運行單獨的 JavaScript 構(gòu)建任務：
JavaScript 構(gòu)建任務
要構(gòu)建 Angular 包：
從根目錄構(gòu)建 Angular 包：
從 ./wrappers/angular 目錄，您還可以運行單獨的 Angular 構(gòu)建任務：
Angular構(gòu)建任務
要構(gòu)建 React 包：
從根目錄構(gòu)建 React 包：
從 ./wrappers/react 目錄，您還可以運行單獨的 React 構(gòu)建任務：
React構(gòu)建任務
要構(gòu)建 Vue 包：
從根目錄構(gòu)建 Vue 包：
當 populateFromArray() 方法的方法參數(shù)設置為 shift_down 或 shift_right 時，它的工作方式現(xiàn)在有所不同。
之前，當設置為 shift_down 或 shift_right 時，populateFromArray() 為每行執(zhí)行單獨的 spliceRow 操作，或為每列執(zhí)行單獨的 spliceColumn 操作。
現(xiàn)在，當設置為 shift_down 或 shift_right 時，populateFromArray() 會用一個大型操作填充行（或列）。 性能上的差異確實令人印象深刻：
如果您使用由每個 spliceRow 和 spliceColumn 操作觸發(fā)的 beforeChange 和 afterChange 掛鉤，則需要適應這些變化。
為了正確處理基于本地的數(shù)據(jù)，我們給了Handsontable一個新的配置選項，叫做locale。默認情況下，它被設置為en-US。
到目前為止，我們只使用locale來確保正確過濾土耳其語的自定義搜索輸入，但我們計劃在未來擴大其使用范圍，以進一步定制功能，如過濾、搜索或比較不同的基于本地的數(shù)據(jù)集。這是改進Handsontable內(nèi)置國際化功能的一個很好的起點。
你可以為整個網(wǎng)格設置地域選項：
const hot = new Handsontable(container, {
// set the entire grid's locale to Turkish
locale: 'tr-TR',
});
但是您也可以為單個列設置它：
const hot = new Handsontable(container, {
columns: [
{
// set the first column's locale to Polish
locale: 'pl-PL',
},
{
// set the second column's locale to German
locale: 'de-DE',
},
{
// set the third column's locale to Japanese
locale: 'ja-JP',
},
],
});
要了解更多信息，請參閱 Handsontable 文檔。
正如所承諾的，我們會不斷改進 Handsontable 的文檔。 自上一個 Handsontable 版本以來，我們對 API 參考的選項部分進行了徹底檢查，重寫了一些指南（例如構(gòu)建），重新構(gòu)建了一些其他指南（例如模塊），添加了全新的指南（例如 React 模塊），添加了一些新的部分 現(xiàn)有指南（例如語言環(huán)境設置）等。
由于我們引入了一些向后不兼容的更改，因此我們準備了一份遷移指南，引導您逐步從 Handsontable 10 升級到 Handsontable 11。
從 Handsontable 11.0.0 開始，React 包裝器、Angular 包裝器和 Vue 包裝器支持模塊化。
如果您不使用任何包裝器，則無需更改任何內(nèi)容。
要繼續(xù)將所有 Handsontable 模塊與您的包裝器一起使用，請使用新的 registerAllModules() 方法注冊所有模塊。
在應用程序的入口點文件中，添加以下代碼：
// import the registerAllModules() methodimport { registerAllModules } from 'handsontable/registry';
// register all Handsontable modulesregisterAllModules();
要開始在您的包裝器中使用單個 Handsontable 模塊，請參閱以下指南：
以前，Handsontable 的所有 TypeScript 定義都保存在一個大文件中，放在根目錄中：./handsontable.d.ts。
現(xiàn)在，每個模塊都有自己的 TypeScript 定義文件。 它們都保存在一個新的類型目錄中：./handsontable/types （打開新窗口）。
有關(guān)更多詳細信息，請參閱此拉取請求 （打開新窗口）。
當 populateFromArray() 方法的方法參數(shù)設置為 shift_down 或 shift_right 時，它的工作方式現(xiàn)在有所不同。
new Handsontable(element, {
afterChange: (changes, source) => {
if (source === 'spliceRow' || source === 'spliceCol') {
handleChange(changes[0]);
}
}});
new Handsontable(element, {
afterChange: (changes, source) => {
if (source === 'populateFromArray') {
changes.forEach(change => handleChange(change))
}
}});
京ICP備09015132號-996 | 違法和不良信息舉報電話：4006561155
© Copyright 2000-2026 北京哲想軟件有限公司版權(quán)所有 | 地址:北京市海淀區(qū)西三環(huán)北路50號豪柏大廈C2座11層1105室
北京哲想軟件集團旗下網(wǎng)站：哲想軟件 | 哲想動畫
