官方 Angular 16+ 版本的 Handsontable 包装器

具备电子表格样式界面和操作体验的 JavaScript 数据网格。

 

凭借其电子表格式的编辑功能，该组件非常适合构建数据密集型内部应用程序。它支持用户从多种来源输入、编辑、验证和处理数据。典型应用场景包括资源规划软件（ERP）、库存管理系统、数字平台以及数据建模应用程序。

 

核心功能

 

• 内置主题
• 灵活的 API
• 虚拟化
• ME 支持
• 国际化
• RTL 支持
• 辅助功能
• 键盘快捷键
• 数据排序
• 数据筛选
• 400 个内置公式
• 可配置选择
• 数据验证
• 条件格式化
• 合并单元格
• 固定/冻结列
• 隐藏列
• 右键上下文菜单

 

安装

 

以下是 Angular 包装器的安装指南。如果您使用的是其他框架，请参考其专用的包装器以获取具体的安装说明。

 

• React 函数组件

• React 类组件

• Vue

 

通过 npm 或 Yarn 安装 Handsontable。

npm install handsontable @handsontable/angular-wrapper

 

导入 CSS 文件

将 Handsontable 的 CSS 导入应用程序的 styles.scss 文件：

 

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

 

注册 Handsontable 的模块

通过单个函数调用导入并注册 Handsontable 的所有模块（例如在 app.component.ts 中）：

 

import { registerAllModules } from ‘handsontable/registry’;

registerAllModules();

 

导入 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"

  };}

 

 

 

资源

网站

演示

文档

npm

CDN

论坛

博客

联系支持团队

 

Handsontable 是一个数据网格组件还是电子表格？

 

Handsontable 是一个用 JavaScript 编写的数据网格组件，而不是电子表格。然而，它集成了许多通常在电子表格软件中找到的功能。我们这样设计是因为电子表格式的布局在数据输入和管理方面通常是对用户最友好的。

 

Handsontable 中的电子表格式功能：

• 支持与 Google Sheets 或 Excel 兼容的键盘快捷键

• 通过与 HyperFormula 的原生集成提供 400 个电子表格公式

• 可禁用的标题行键盘导航，仅允许单元格导航

• 可禁用的单元格 TAB 导航

• 内置撤销/重做功能

• 强大的剪贴板功能，支持复制粘贴操作

•可在容器（div）或窗口内滚动网格

•以对象数组或数组数组形式的数据绑定

•内置单元格编辑器，如日期选择器或下拉列表

 

乍一看，数据表、电子表格和数据网格似乎只是同一事物的不同名称——一个用于显示数据的交互式表格。实际上，这些工具服务于不同的目的并提供独特的功能，旨在满足特定需求。Handsontable 属于数据网格类别，同时融合了电子表格软件的许多优秀特性。

 

技术支持

 

我们随时为您提供帮助！

您可以：

• 在 GitHub 讨论区参与讨论，分享想法、提出功能建议或讨论更改。

• 在我们的 GitHub 问题跟踪板上报告任何发现的漏洞。

• 在我们的开发者论坛上与其他开发者交流并获取答案。

 

如果您拥有商业许可证，请随时通过邮件或联系表单联系我们。

 

许可密钥

 

对于采用非商业许可的项目，请直接使用“non-commercial-and-evaluation”作为许可密钥。

如果您在用于商业活动用途的项目中使用 Handsontable，您需要购买许可证密钥。您可以在我们的文档中找到更多详细信息。

 

做贡献

 

我们欢迎您为开发贡献您的一份力量，但在您进行贡献之前，请阅读《贡献指南》并接受《贡献者许可协议》。