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

 

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

 

核心功能

 

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

 

安裝

 

以下是 Angular 包裝器的安裝指南。如果您使用的是其他框架，請參考其專用的包裝器以獲取具體的安裝說明。

 

• React 函數(shù)組件

• React 類組件

• Vue

 

通過 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”;

 

注冊 Handsontable 的模塊

通過單個函數(shù)調(diào)用導(dǎo)入并注冊 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)系支持團隊

 

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

 

Handsontable 是一個用 JavaScript 編寫的數(shù)據(jù)網(wǎng)格組件，而不是電子表格。然而，它集成了許多通常在電子表格軟件中找到的功能。我們這樣設(shè)計是因為電子表格式的布局在數(shù)據(jù)輸入和管理方面通常是對用戶最友好的。

 

Handsontable 中的電子表格式功能：

• 支持與 Google Sheets 或 Excel 兼容的鍵盤快捷鍵

• 通過與 HyperFormula 的原生集成提供 400 個電子表格公式

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

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

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

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

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

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

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

 

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

 

技術(shù)支持

 

我們隨時為您提供幫助！

您可以：

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

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

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

 

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

 

許可密鑰

 

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

如果您在用于商業(yè)活動用途的項目中使用 Handsontable，您需要購買許可證密鑰。您可以在我們的文檔中找到更多詳細信息。

 

做貢獻

 

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