具備電子表格樣式界面和操作體驗(yàn)的 JavaScript 數(shù)據(jù)網(wǎng)格。

 

憑借其電子表格式的編輯功能，該組件非常適合構(gòu)建數(shù)據(jù)密集型內(nèi)部應(yīng)用程序。它支持用戶從多種來(lái)源輸入、編輯、驗(yàn)證和處理數(shù)據(jù)。典型應(yīng)用場(chǎng)景包括資源規(guī)劃軟件（ERP）、庫(kù)存管理系統(tǒng)、數(shù)字平臺(tái)以及數(shù)據(jù)建模應(yīng)用程序。

 

核心功能

 

• 內(nèi)置主題
• 靈活的 API
• 虛擬化
• ME 支持
• 國(guó)際化
• RTL 支持
• 輔助功能
• 鍵盤(pán)快捷鍵
• 數(shù)據(jù)排序
• 數(shù)據(jù)篩選
• 400 個(gè)內(nèi)置公式
• 可配置選擇
• 數(shù)據(jù)驗(yàn)證
• 條件格式化
• 合并單元格
• 固定/凍結(jié)列
• 隱藏列
• 右鍵上下文菜單

 

安裝

 

以下是 Angular 包裝器的安裝指南。如果您使用的是其他框架，請(qǐng)參考其專(zhuān)用的包裝器以獲取具體的安裝說(shuō)明。

 

• React 函數(shù)組件

• React 類(lèi)組件

• Vue

 

通過(guò) npm 或 Yarn 安裝 Handsontable。

npm install handsontable @handsontable/angular-wrapper

 

導(dǎo)入 CSS 文件

將 Handsontable 的 CSS 導(dǎo)入應(yīng)用程序的 styles.scss 文件：

 

@import “handsontable/styles/handsontable.min.css”;@import “handsontable/styles/ht-theme-main.min.css”;

 

注冊(cè) Handsontable 的模塊

通過(guò)單個(gè)函數(shù)調(diào)用導(dǎo)入并注冊(cè) Handsontable 的所有模塊（例如在 app.component.ts 中）：

 

import { registerAllModules } from ‘handsontable/registry’;

registerAllModules();

 

導(dǎo)入 HotTableModule

import { HotTableModule } from ‘@handsontable/angular-wrapper’;

 

@Component({

  standalone: true,

  imports: [HotTableModule],})

 

使用 HotTable 組件

import {

  GridSettings,

  HotTableComponent,

  HotTableModule,} from “@handsontable/angular-wrapper”;

 

@Component({

  standalone: true,

  imports: [HotTableModule],

  template: `        `,})export class HotTableWrapperComponent {

  readonly data = [

    ["", "Tesla", "Volvo", "Toyota", "Ford"],

    [“2019”, 10, 11, 12, 13],

    [“2020”, 20, 11, 14, 13],

    [“2021”, 30, 15, 12, 13],

  ];

  

  readonly gridSettings: GridSettings = {

   rowHeaders: true,

    colHeaders: true,

    height: "auto",

    autoWrapRow: true,

    autoWrapCol: true,

    licenseKey: "non-commercial-and-evaluation"

  };}

 

 

 

資源

網(wǎng)站

演示

文檔

npm

CDN

論壇

博客

聯(lián)系支持團(tuán)隊(duì)

 

Handsontable 是一個(gè)數(shù)據(jù)網(wǎng)格組件還是電子表格？

 

Handsontable 是一個(gè)用 JavaScript 編寫(xiě)的數(shù)據(jù)網(wǎng)格組件，而不是電子表格。然而，它集成了許多通常在電子表格軟件中找到的功能。我們這樣設(shè)計(jì)是因?yàn)殡娮颖砀袷降牟季衷跀?shù)據(jù)輸入和管理方面通常是對(duì)用戶最友好的。

 

Handsontable 中的電子表格式功能：

• 支持與 Google Sheets 或 Excel 兼容的鍵盤(pán)快捷鍵

• 通過(guò)與 HyperFormula 的原生集成提供 400 個(gè)電子表格公式

• 可禁用的標(biāo)題行鍵盤(pán)導(dǎo)航，僅允許單元格導(dǎo)航

• 可禁用的單元格 TAB 導(dǎo)航

• 內(nèi)置撤銷(xiāo)/重做功能

• 強(qiáng)大的剪貼板功能，支持復(fù)制粘貼操作

•可在容器（div）或窗口內(nèi)滾動(dòng)網(wǎng)格

•以對(duì)象數(shù)組或數(shù)組數(shù)組形式的數(shù)據(jù)綁定

•內(nèi)置單元格編輯器，如日期選擇器或下拉列表

 

乍一看，數(shù)據(jù)表、電子表格和數(shù)據(jù)網(wǎng)格似乎只是同一事物的不同名稱(chēng)——一個(gè)用于顯示數(shù)據(jù)的交互式表格。實(shí)際上，這些工具服務(wù)于不同的目的并提供獨(dú)特的功能，旨在滿足特定需求。Handsontable 屬于數(shù)據(jù)網(wǎng)格類(lèi)別，同時(shí)融合了電子表格軟件的許多優(yōu)秀特性。

 

技術(shù)支持

 

我們隨時(shí)為您提供幫助！

您可以：

• 在 GitHub 討論區(qū)參與討論，分享想法、提出功能建議或討論更改。

• 在我們的 GitHub 問(wèn)題跟蹤板上報(bào)告任何發(fā)現(xiàn)的漏洞。

• 在我們的開(kāi)發(fā)者論壇上與其他開(kāi)發(fā)者交流并獲取答案。

 

如果您擁有商業(yè)許可證，請(qǐng)隨時(shí)通過(guò)郵件或聯(lián)系表單聯(lián)系我們。

 

許可密鑰

 

對(duì)于采用非商業(yè)許可的項(xiàng)目，請(qǐng)直接使用“non-commercial-and-evaluation”作為許可密鑰。

如果您在用于商業(yè)活動(dòng)用途的項(xiàng)目中使用 Handsontable，您需要購(gòu)買(mǎi)許可證密鑰。您可以在我們的文檔中找到更多詳細(xì)信息。

 

做貢獻(xiàn)

 

我們歡迎您為開(kāi)發(fā)貢獻(xiàn)您的一份力量，但在您進(jìn)行貢獻(xiàn)之前，請(qǐng)閱讀《貢獻(xiàn)指南》并接受《貢獻(xiàn)者許可協(xié)議》。