前端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 10.0.0 于 2021 年 9 月 29 日发布本次版本升级带来了一系列破坏性变更涉及渲染钩子hooks的命名与语义、HyperFormula 公式引擎的依赖版本、多个配置选项的默认值以及默认字体样式。本文以官方迁移文档为主体结合当前仓库源码hooks 常量定义、CopyPaste 插件实现、metaSchema 选项默认值 等逐项拆解帮助你对照检查自己的应用代码完成从 9.0 到 10.0 的平滑迁移。本文适用的应用场景任何基于 Handsontable 9.x 构建、需要升级到 10.x 的 JavaScript / React / Angular / Vue 项目。读完本文你将掌握渲染钩子的新旧命名对应关系、controller参数的替换规则、HyperFormula 依赖的升级路径以及受影响的默认值清单并能据此快速定位需要修改的代码位置。迁移前的准备了解 10.0.0 破坏性变更总览Handsontable 10.0.0 的全部变更细节记录在 CHANGELOG.md 中本次迁移共涉及 6 项破坏性变更重命名beforeRender/afterRender钩子为beforeViewRender/afterViewRender并赋予旧名称全新的语义可选依赖 HyperFormula 从0.6.2升级到^1.1.0配置选项autoWrapCol/autoWrapRow的默认值从true改为falseCopyPaste 插件的rowsLimit/columnsLimit默认值从1000改为Infinity统一beforeOnCellMouseDown/beforeOnCellMouseOver钩子的第四个参数controller的命名与结构为.handsontable类下的所有元素新增默认字体族、字号、字重和颜色。下面按照官方迁移指南的五步流程逐一说明每项变更的具体内容、影响范围与应对方法。Step 1重命名你的 Handsontable 渲染钩子10.0.0 对渲染流程做了重新梳理最直观的体现就是钩子名称的变更。如果你在应用中使用过beforeRender或afterRender钩子请按下表更新名称升级前9.x升级后10.xbeforeRenderbeforeViewRenderafterRenderafterViewRender新名称的触发时机从源码看新钩子的触发时机与旧钩子基本对应beforeViewRender在 Handsontable 的视图渲染引擎开始渲染之前触发afterViewRender在视图渲染引擎渲染完成之后、但尚未重绘选区边框和同步滚动之前触发。它们都会收到一个isForced布尔参数isForced true渲染由设置变更、数据变更或需要完整渲染周期的逻辑触发isForced false渲染由滚动或移动选区等轻量操作触发。这些语义在 hooks 常量定义 中有完整注释说明。旧名称现在做了什么「新事情」注意升级后仍然存在名为beforeRender和afterRender的钩子但它们的含义完全不同了。新版语义如下见 hooks 常量定义beforeRender在 Handsontable 业务逻辑执行完毕、渲染引擎开始调用 Core 逻辑、renderers、单元格 meta 等来更新视图之前触发。isForced false时仍会重绘新进入视口的行列但滚动本身不会触发该钩子afterRender在视图渲染引擎更新视图之后触发参数规则与beforeRender相同。因此升级后请务必检查你的钩子注册代码原来监听“每次视图绘制前后”的beforeRender/afterRender→ 改为beforeViewRender/afterViewRender确认你确实需要新版beforeRender/afterRender的语义后再注册它们不要无意识地同时挂载新旧两套钩子导致逻辑重复。对应的钩子测试beforeViewRender.spec.js验证了beforeViewRender仅在慢渲染路径draw()被调用上触发且beforeViewRender一定先于afterViewRender执行。渲染引擎层面Walkontable 的绘制循环也遵循“核心的beforeViewRender在首轮绘制前触发一次、afterViewRender在末轮绘制后触发一次”的顺序见 drawCycle.ts 的注释。Step 2适配 HyperFormula 依赖升级Handsontable 10.0.0 将可选的 HyperFormula 依赖从0.6.2升级到^1.1.0这会影响Formulas插件公式计算的使用者。你的依赖是否需要同步升级HyperFormula 是Formulas插件的可选依赖只有使用公式功能的项目才需要处理。当前仓库中 handsontable/package.json 声明的 hyperformula 版本为^3.0.0后续版本又做了多次升级而 10.0.0 时代的对应版本是^1.1.0。作为从 9.0 迁移上来的项目你需要将 package.json 中声明的hyperformula版本升级到与你的 Handsontable 10.x 版本匹配的范围10.0.x 对应^1.1.0阅读 HyperFormula 官方 0.6.x → 1.0.x 迁移指南处理引擎 API 层面的破坏性变更。引擎注册机制仍兼容从源码结构看Formulas插件的引擎注册逻辑register.ts支持三种配置方式直接传入引擎类、传入引擎实例、或传入{ hyperformula: engineClass }形式。引擎实例通过engineClass.buildEmpty(engineSettings)创建并注册自定义函数、语言包与命名表达式register.ts。也就是说升级 HyperFormula 后你仍然可以用相同的方式把新版本引擎接入Formulas插件主要成本集中在引擎自身 API 的适配上。Step 3适配配置选项的新默认值10.0.0 调整了四类配置项的默认值如果之前依赖旧默认值行为会发生变化需要显式配置以恢复原有体验。autoWrapCol / autoWrapRow从 true 改为 falseautoWrapCol和autoWrapRow控制键盘导航在到达表格边缘时的「换行」行为默认值从true改为false详见 CHANGELOG.md。JavaScript 写法对比升级前9.x升级后10.xautoWrapCol: trueautoWrapCol: falseautoWrapRow: trueautoWrapRow: falseReact 写法对比升级前9.x升级后10.xautoWrapCol{true}autoWrapCol{false}autoWrapRow{true}autoWrapRow{false}升级后当你选中表格最底部的单元格时按方向键 ⬇ 不会再有反应autoWrapCol: false时不会跳到下一列顶部同样选中行首单元格按 ⬅ 或ShiftTab也不会跳转到上一行末尾autoWrapRow: false时不会换行。如果你希望保留 9.x 的环绕导航体验请显式设置// 恢复 9.x 的键盘环绕导航行为 const hot new Handsontable(container, { autoWrapCol: true, autoWrapRow: true, // ... 其他配置 });这两个选项的当前默认值false已在 metaSchema.ts 的default注释与默认值声明中得到确认对应的行为说明如autoWrapCol: false时按 ⬇ 不做任何事、autoWrapCol: true时按 ⬇ 跳到下一列最上方单元格也直接写在源码文档注释中。autoWrapRow还受tabNavigation、minSpareCols等其他选项的优先级影响见 hooks 常量定义 中beforeRowWrap钩子的说明。针对此默认值的回归测试位于 autoWrapCol.spec.js。CopyPaste 的 rowsLimit / columnsLimit从 1000 改为 InfinityCopyPaste插件的rowsLimit和columnsLimit用于限制复制到剪贴板的最大行数 / 列数默认值从1000改为Infinity意味着复制操作不再受默认数量上限约束。JavaScript 写法对比升级前9.x升级后10.xrowsLimit: 1000rowsLimit: InfinitycolumnsLimit: 1000columnsLimit: InfinityReact 写法对比升级前9.x升级后10.xrowsLimit{1000}rowsLimit{Infinity}columnsLimit{1000}columnsLimit{Infinity}从 CopyPaste 插件源码 看DEFAULT_SETTINGS中rowsLimit与columnsLimit均声明为Infinity类属性默认值同样是Infinity插件在初始化时通过isNaN判断用户是否显式传值未传则保持默认copyPaste.ts。最终复制范围会调用剪贴板尺寸计算逻辑将选区范围与rowsLimit、columnsLimit一起参与裁剪copyPaste.ts。迁移建议如果你曾经依赖1000行 / 列的隐性上限来防止大数据量复制卡顿升级后请显式设置合理的rowsLimit/columnsLimit值如果项目一直希望复制不受限制则无需任何改动。Step 4适配钩子参数的统一命名10.0 统一了beforeOnCellMouseDown和beforeOnCellMouseOver钩子第四个参数的命名与结构Handsontable 钩子升级前参数名升级后参数名beforeOnCellMouseDownblockCalculationscontrollerbeforeOnCellMouseOverblockCalculationscontrollercontroller 对象的结构变化两个钩子中的controller对象不仅改了名字内部结构也做了调整——cells属性更名为cellblockCalculations升级前controller升级后rowcolumncellsrowcolumncell新结构下controller.row、controller.column、controller.cell各自包含一个布尔值用于允许或禁止对应区域的选区变更参见 hooks 常量定义 中两个钩子的 JSDoc 注释。例如9.x 时代常见的「阻止特定单元格被选中」写法// 9.x 写法已废弃 beforeOnCellMouseDown: (event, coords, TD, blockCalculations) { blockCalculations.cells true; }迁移后应改为// 10.x 写法 beforeOnCellMouseDown: (event, coords, TD, controller) { controller.cell true; }受影响的插件参数重命名影响以下插件它们内部会通过该参数控制选区交互ColumnSortingcolumnSorting.tsMultiColumnSortingManualColumnMoveManualRowMoveNestedHeaders如果你在应用中直接调用这些插件并传入了blockCalculations参数务必同步更新为controller及controller.cell。该变更同时收录在 CHANGELOG.md 的破坏性变更列表中。Step 5适配默认字体样式变更为了让 Handsontable 开箱即用就有良好的外观10.0 为.handsontableCSS 类下的所有元素新增了默认的font-family、font-size、font-weight和color属性。源码中的实现证据在 base.scss 中.handsontable类声明了font-family通过mixins.font-family引入实际取值为var(--ht-font-family), -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif见 _mixins.scss优先使用主题变量回退到系统字体栈font-sizevar(--ht-font-size)font-weightvar(--ht-font-weight)colorvar(--ht-foreground-color)。也就是说当前仓库中字体样式已经变量化便于通过主题定制覆盖。而在 10.0.0 刚引入默认字体时这项变更是破坏性的——如果你的应用没有显式覆盖这些属性升级后网格的字体外观会直接改变。迁移建议升级后检查应用的整体视觉效果确认网格字体是否符合预期若希望自定义字体可在自己的 CSS 中覆盖.handsontable内的字体属性当前仓库推荐通过主题 CSS 变量覆盖若你的应用全局重置了字体样式如* { font-family: ... }需注意其与 Handsontable 默认样式的优先级关系。升级清单从 9.0 迁移到 10.0 的完整检查表将上述五步整理为一份可勾选的检查清单方便你在实际项目中逐项核对搜索代码中的beforeRender/afterRender钩子确认是否表示“视图渲染前后”若是则重命名为beforeViewRender/afterViewRender确认新版beforeRender/afterRender钩子的新语义是否是你需要的避免新旧钩子逻辑混淆若使用Formulas插件将hyperformula依赖升级到与 Handsontable 10.x 匹配的版本10.0.x 对应^1.1.0并适配 HyperFormula 引擎 API检查键盘导航体验若依赖 9.x 的环绕导航显式设置autoWrapCol: true和autoWrapRow: true若依赖复制数量上限显式设置rowsLimit/columnsLimit默认已变为Infinity将beforeOnCellMouseDown/beforeOnCellMouseOver中的blockCalculations参数重命名为controller并把blockCalculations.cells改为controller.cell检查受影响的插件ColumnSorting、MultiColumnSorting、ManualColumnMove、ManualRowMove、NestedHeaders中对该参数的使用升级后检查网格字体外观必要时显式覆盖字体样式运行应用的完整测试套件包括键盘导航、复制粘贴、排序、移动、嵌套表头等场景确认无回归。参考资源10.0.0 完整变更日志CHANGELOG.md官方 Changelog 文档docs/content/guides/upgrade-and-migration/changelog/changelog.md钩子常量与 JSDoc 语义定义handsontable/src/core/hooks/constants.ts渲染钩子测试用例handsontable/src/tests/hooks/beforeViewRender.spec.jsCopyPaste 插件默认值与裁剪逻辑handsontable/src/plugins/copyPaste/copyPaste.ts配置选项默认值autoWrapCol/autoWrapRowhandsontable/src/dataMap/metaManager/metaSchema.ts默认字体样式实现handsontable/src/styles/base/_base.scss、handsontable/src/styles/utils/_mixins.scss按上述五个步骤完成改动后你的应用就运行在了 Handsontable 10.0 上可以继续享受后续版本带来的性能与一致性改进。赞分享前端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点击查看免费下载相关推荐3步掌握GenankiPython自动化创建Anki卡片的终极指南3步掌握GenankiPython自动化创建Anki卡片的终极指南 还在为手动制作Anki卡片而烦恼吗Genanki这个强大的Python库将彻底改变你的学教育leebaird/discover敏感信息检测如何快速发现和防护数据泄露风险leebaird/discover敏感信息检测如何快速发现和防护数据泄露风险 在数字化时代数据泄露已成为企业和个人面临的重大安全威胁。leebaird/di网络安全TRL v0 到 v1 迁移指南默认值变更、参数重命名与 None 值处理TRL v0 到 v1 迁移指南默认值变更、参数重命名与 None 值处理 本指南面向所有从 TRL v0 升级到 v1 的开发者系统梳理 v1 引入的破坏人工智能大模型强化学习RLHF预训练微调LoRA上一篇【亲测免费】 OpenAvatarChat模块化的交互数字人对话实现下一篇ZML 项目使用与启动教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考