在 Angular 中快速上手 Handsontable：官方综合 Demo 工程全解析

前端UI组件【免费下载链接】handsontableJavaScript Data Grid / Data Table with a Spreadsheet Look Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡项目地址https://gitcode.com/gh_mirrors/ha/handsontable点击查看免费下载本篇指南基于 Handsontable 官方仓库中的 Angular 综合示例工程位于 examples/next/docs/angular-wrapper/demo展开。该工程是一个通用目的general purpose的演示项目集中展示了 Handsontable 在 Angular 中最受欢迎的核心能力——从单元格类型、右键菜单、筛选排序到行列操作与全局配置。读完本文你将掌握如何安装依赖、启动开发服务器、运行冒烟测试以及如何解读工程内每一处 GridSettings 配置背后的含义并了解将该示例独立 fork 到自有仓库的完整流程。工程定位一个展示最流行功能的 Angular Demo这个 demo 不是 Hello World而是一张功能密集的功能陈列桌。它的模板极其精简核心逻辑全部集中在两个 TypeScript 文件中组件类 app.component.ts 与全局配置 app.config.ts。模板 app.component.html 中只有一行组件标签div hot-table [data]initialData [settings]gridSettings/hot-table /div这种模板极简、配置集中的组织方式本身就是 Handsontable Angular Wrapper 推荐的使用范式通过[data]属性绑定数据源通过[settings]属性绑定完整的网格配置对象业务逻辑与表现层彻底解耦。安装与运行三步走安装依赖在示例工程目录下执行npm install该命令会安装 package.json 中声明的全部依赖。从依赖清单可以看到本工程的典型技术栈Angular 运行时angular/core、angular/common、angular/forms、angular/router等均使用latest标签核心库handsontable网格引擎本体与handsontable/angular-wrapperAngular 官方封装层辅助库moment日期处理、rxjs、tslib、zone.js测试工具链jasmine、jasmine-console-reporter、puppeteer无头浏览器、http-server。其中handsontable与handsontable/angular-wrapper均为latest版本。需要说明的是next目录下的示例依赖本地构建的handsontable与 wrapper 包通过工作区符号链接注入因此在 monorepo 根目录跑next示例前通常需要先构建根级包详见 examples/README.md 的 Development 章节。启动开发服务器npm run start该命令实际执行的是ng serve --port 8080见 package.json启动后访问http://localhost:8080即可在浏览器中看到完整的 Handsontable 网格。Angular CLI 的开发服务器自带热重载修改src下的代码后页面会自动刷新。运行测试测试采用先起服务、再跑用例的两段式流程npm run start # 先启动开发服务器 npm run test # 服务器运行后另开终端执行npm run test实际执行node spec/support/jasmine.config.js通过 Jasmine 驱动 Smoke.spec.js 中的冒烟用例。该用例的核心逻辑如下通过 Puppeteer 启动无头 Chromiumargs: [--no-sandbox, --disable-setuid-sandbox]访问process.env.TEST_URL || http://localhost:8080断言页面中存在.handsontable td元素即网格真实渲染出了单元格。it(should render Handsontable, async () { const hotCell await page.$(.handsontable td); await expect(hotCell).toBeTruthy(); });这是一个典型的渲染冒烟测试只要网格没崩、DOM 里有表格单元格测试即通过用于在示例交付前快速兜底。逐项拆解 GridSettingsdemo 展示了哪些能力demo 的全部功能配置集中在 app.component.ts 的gridSettings对象中。下面按功能族逐项解读这些配置可直接复制到你的 Angular 工程中。尺寸与表头height: 450, colWidths: [180, 220, 140, 120, 120, 120, 140], colHeaders: [ Company Name, Name, Sell date, In stock, Quantity, Order ID, Country, ], rowHeaders: true, headerClassName: htLeft,height: 450网格固定高度为 450pxcolWidths按列指定宽度数组与 7 列一一对应colHeaders自定义列头文案数组形式rowHeaders: true显示行号列headerClassName: htLeft为表头元素附加 CSS 类可配合自定义样式实现左对齐等视觉效果。右键菜单与下拉菜单contextMenu: [ cut, copy, ---------, row_above, row_below, remove_row, ---------, alignment, make_read_only, clear_column, ] as PredefinedMenuItemKey[], dropdownMenu: true,contextMenu右键菜单项使用预定义键名PredefinedMenuItemKey组装包括剪切/复制、插入上行/下行/删除行、对齐方式、设为只读、清空列并用---------分隔线分组。这些键名来自handsontable/plugins/contextMenu模块见文件头部的 import 语句dropdownMenu: true开启表头下拉菜单便于对列执行筛选、排序等操作。列管理与排序筛选hiddenColumns: { indicators: true }, multiColumnSorting: true, filters: true,hiddenColumns.indicators: true允许隐藏列并在表头显示列被隐藏的指示器标记multiColumnSorting: true开启多列排序可同时按多列排序filters: true开启基于列的筛选器插件与dropdownMenu配合使用。行交互与编辑体验manualRowMove: true, manualRowResize: true, manualColumnResize: true, autoRowSize: true, autoWrapRow: true, autoWrapCol: true, navigableHeaders: true, imeFastEdit: true,manualRowMove允许用户拖拽移动行manualRowResize/manualColumnResize允许拖拽调整行高与列宽autoRowSize自动根据内容计算行高autoWrapRow/autoWrapCol光标在网格边缘自动换行/换列导航navigableHeaders: true允许键盘焦点进入表头区域进行导航imeFastEdit: true针对中文、日文等使用 IME输入法的场景优化快速编辑体验减少输入法组合键被误触发的概率。单元格类型columns 定义columns: [ { data: 1 }, { data: 3 }, { data: 4, type: date, allowInvalid: false, dateFormat: { day: 2-digit, month: 2-digit, year: numeric }, locale: en-GB }, { data: 6, type: checkbox, className: htCenter }, { data: 7, type: numeric }, { data: 5 }, { data: 2 }, ],这里演示了三种内置单元格类型date 日期类型type: date配合dateFormat使用Intl.DateTimeFormat风格的day/month/year配置与locale: en-GB指定格式化区域allowInvalid: false表示拒绝非法日期输入checkbox 复选框type: checkbox数据源中对应列的布尔值直接映射为勾选状态className: htCenter使其居中显示numeric 数值类型type: numeric提供数值相关的编辑与格式化行为。数据源 constants.ts 中每条记录是一个 10 元素数组含选中布尔标记、公司名、国家、产品名、日期、订单号、库存布尔值、数量等data索引将列映射到对应字段。例如第 0 个布尔字段并不显示为数据列而是被beforeRenderer钩子用于行的视觉状态见下文。渲染钩子beforeRenderer 行级高亮beforeRenderer: addClassesToRows,addClassesToRows定义在 add-classes-to-rows.function.ts 中是一个标准的 Handsontable 渲染前钩子在每个单元格渲染前被调用只在每行第一个可见单元格column 0时操作根据数据第 0 个布尔字段的值通过Handsontable.dom.addClass/removeClass为整行tr添加或移除selected样式类从而实现按数据标记高亮整行的效果if (cellProperties.instance.getDataAtRowProp(row, 0)) { Handsontable.dom.addClass(parentElement, SELECTED_CLASS); } else { Handsontable.dom.removeClass(parentElement, SELECTED_CLASS); }这是将beforeRenderer与自定义 CSS 类结合做行级视觉反馈的典型范例。全局配置注册模块与许可证注入与组件级配置不同app.config.ts 演示了 Angular 应用启动阶段的全局初始化import { registerAllModules } from handsontable/registry; registerAllModules();registerAllModules()一次性注册 Handsontable 的全部插件模块让上文中contextMenu、filters、multiColumnSorting、hiddenColumns等插件无需逐一手动导入即可生效——这是 demo 这类全功能展示场景的便捷做法在生产环境中官方建议按需导入模块以控制打包体积。随后通过依赖注入提供全局 Handsontable 配置const globalHotConfig: HotGlobalConfig { license: NON_COMMERCIAL_LICENSE, }; export const appConfig: ApplicationConfig { providers: [ provideZoneChangeDetection({ eventCoalescing: true }), { provide: HOT_GLOBAL_CONFIG, useValue: globalHotConfig }, ], };HOT_GLOBAL_CONFIG是 wrapper 暴露的全局配置 InjectionToken实现位于 hot-global-config.service.ts通过它可以在应用级统一注入许可证而不必在每个hot-table组件上重复配置这也是 wrapper 文档明确推荐的做法见 wrappers/angular-wrapper/AGENTS.mdNON_COMMERCIAL_LICENSE是仓库内置的非商业许可证常量provideZoneChangeDetection({ eventCoalescing: true })启用 Angular 的事件合并event coalescing减少变更检测触发次数。应用入口 main.ts 使用bootstrapApplication(AppComponent, appConfig)引导独立standalone组件AppComponent通过imports: [HotTableModule]引入网格能力而无需NgModule。将示例 fork 到独立仓库该 demo 位于 Handsontable 的 monorepo 中。官方提供了两种分叉方式见原文档 Forking 章节fork 整个仓库适合想保留所有示例与工作区结构的场景把示例单独复制到一个新仓库详细步骤见 examples/README.md 的Copying an example to a separate repo章节。复制到独立仓库时有一个关键注意事项monorepo 的 npm workspace 可能在示例的node_modules中放置符号链接因此在复制前应删除该目录复制到目标位置后重新执行npm install生成干净的依赖树。官方给出的操作流程大致为克隆仓库 → 进入目标示例目录 → 删除node_modules→ 将示例目录复制到仓库外的目标位置 → 可选git init初始化新仓库 →npm install→npm run start。其他示例与运行入口如果你希望查看更多 Angular 场景同目录下还提供了 basic-example最小化入门与>赞分享前端UI组件【免费下载链接】handsontableJavaScript Data Grid / Data Table with a Spreadsheet Look Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡项目地址https://gitcode.com/gh_mirrors/ha/handsontable点击查看免费下载相关推荐在 Angular 中集成 Handsontable官方 Demo 的运行、测试与源码剖析在 Angular 中集成 Handsontable官方 Demo 的运行、测试与源码剖析 导读 本文围绕 Handsontable 仓库中面向 Angula前端UI组件Handsontable JavaScript 综合示例 Demo 项目解析安装、运行与测试Handsontable JavaScript 综合示例 Demo 项目解析安装、运行与测试 本指南以 Handsontable 官方仓库中的通用示例项目 e前端UI组件Handsontable Angular 快速上手用 basic-example 构建你的第一个表格应用Handsontable Angular 快速上手用 basic example 构建你的第一个表格应用 本篇技术指南以仓库中的 examples/next/前端UI组件上一篇PyTorch 过拟合避坑一个 weight_decay 参数让跑飞的测试损失拉回来下一篇解决Midday待办事项视图同步难题从数据流向用户体验的全链路分析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考