前端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 中构建多人同时编辑collaborative editing能力的开发者。通过检测活动编辑状态、拦截本地变更、同步结构性变更与非数据变更你可以为网格接入自己的实时协作后端如 WebSocket 服务器实现多客户端间的数据一致性。读完本文你将掌握getActiveEditor()/isOpened()的防覆盖技巧、beforeChange与四个结构性 Hooks 的双向广播模式以及如何同步单元格元数据、评论、合并区域和自定义边框。Handsontable 本身不提供传输层transport layer或冲突解决算法conflict-resolution algorithm。要构建协作编辑你需要自己完成两条链路把本地变更发送到你自己的后端例如 WebSocket 服务器以及把其他协作者的变更应用回网格。本文介绍的就是这条双向流中你需要用到的 Hooks 与 Core 方法——所有示例都通过本地模拟一个远程协作者来演示因此无需真实后端即可运行在你的实际应用中只需把模拟调用替换成从协作服务器收到的消息即可。避免覆盖正在编辑的单元格把远程变更直接写入一个本地用户正在输入的目标单元格会丢弃用户进行中的编辑内容。因此在应用远程变更之前必须先检查目标单元格的编辑器是否处于打开状态。核心检查逻辑getActiveEditor() isOpened()使用getActiveEditor()获取当前活动编辑器实例再调用其isOpened()方法判断编辑器是否打开const editor hot.getActiveEditor(); const editingSameCell editor?.isOpened() editor.row row editor.col column; if (editingSameCell) { // 不要覆盖本地用户正在编辑的单元格—— // 稍后再次检查等本地编辑结束后再应用变更 setTimeout(() applyRemoteChange(row, column, value), 300); return; } hot.setDataAtCell(row, column, value, REMOTE_SOURCE);从源码看getActiveEditor()最终委托给editorManager.getActiveEditor()返回当前持有焦点的编辑器实例结合isOpened()判断编辑器是否已打开可以精确判定该单元格正处于编辑中这一状态。用 beforeChange 广播本地编辑使用beforeChangeHook 读取本地编辑并发送给其他协作者。关键设计给来自其他协作者的变更一个独立的source值如remotePeer这样你的beforeChange处理器就不会把它再次广播出去从而避免广播回环echo loop。源码中setDataAtCell内部会执行runHooks(beforeChange, changes, source || edit)见 handsontable/src/core.ts也就是说无论变更来自用户编辑还是setDataAtCell调用都会流经同一个 Hook——这正是你能在beforeChange中统一拦截、并按source区分本地与远程变更的原因。beforeChange返回false可以取消整批变更也可以在changes数组中把某项置为null来取消单个变更。完整示例JavaScript / TypeScript以下代码来自本仓库的官方示例 example1.js 与 example1.ts配套 HTML 结构见 example1.htmlimport Handsontable from handsontable/base; import { registerAllModules } from handsontable/registry; // 注册 Handsontable 的所有模块 registerAllModules(); const container document.querySelector(#example1); const statusText document.querySelector(#remote-update-status); // 标记变更来自其他协作者避免再次广播 const REMOTE_SOURCE remotePeer; const hot new Handsontable(container, { data: [ [Update onboarding flow, Ana García, In progress], [Fix invoice rounding bug, James Okafor, Blocked], [Write Q3 release notes, Li Wei, In progress], [Migrate auth service, Sofia Rossi, Done], [Design empty states, Diego Fernández, In progress], ], colHeaders: [Task, Assignee, Status], rowHeaders: true, height: auto, licenseKey: non-commercial-and-evaluation, beforeChange(changes, source) { if (source REMOTE_SOURCE || !changes) { return; } changes.forEach(([row, column, , newValue]) { // 把本地编辑发送给你的协作后端 console.log(Broadcasting local edit:, row, column, newValue); }); }, }); function applyRemoteChange(row, column, value) { const editor hot.getActiveEditor(); const editingSameCell editor?.isOpened() editor.row row editor.col column; if (editingSameCell) { // 不覆盖本地用户正在编辑的单元格—— // 稍后再次检查等本地编辑结束后再应用变更 setTimeout(() applyRemoteChange(row, column, value), 300); return; } hot.setDataAtCell(row, column, value, REMOTE_SOURCE); statusText.textContent A collaborator marked Update onboarding flow as Done.; } // 模拟来自其他协作者的更新——在定时器触发前开始编辑第一行的 Status 单元格 // 就能看到远程更新等待你结束编辑 statusText.textContent A remote update to the first row arrives in 3 seconds.; setTimeout(() applyRemoteChange(0, 2, Done), 3000);运行效果示例加载 3 秒后第一行Status列会收到一个模拟的远程更新。如果在此之前开始编辑该单元格远程变更会一直等待直到你完成编辑。各框架包装器中的写法Handsontable 的 React / Angular / Vue 包装器同样支持这套模式核心逻辑一致仅获取实例的方式不同Reactexample1.jsx、example1.tsx通过useRef持有HotTable ref{hotRef}用hotRef.current?.hotInstance获取实例beforeChange直接作为HotTable的属性传入。Vue 3example1.vue用useTemplateRef绑定HotTable refhotRef在onMounted中启动模拟远程更新的定时器onBeforeUnmount中清理。Angularexample1.ts、example1.html)通过ViewChild(HotTableComponent)获取组件this.hotTable?.hotInstance得到实例beforeChange定义在GridSettings中。无论哪个框架请记得先调用registerAllModules()或按需注册模块这是模块化注册的前提见 handsontable/src/registry.ts。守卫并重放结构性变更行与列的增删需要与单元格数据一样做双向处理读取本地结构性变更并转发以及应用来自其他协作者的结构性变更。四个结构性 Hooks使用以下四个 Hook 读取本地结构性变更并转发给其他协作者beforeCreateRow新增行前触发签名(rowIndex, amount, source)beforeRemoveRow删除行前触发签名(index, amount, physicalRows, source)beforeCreateCol新增列前触发beforeRemoveCol删除列前触发从源码看这些 Hook 在数据层操作前被同步执行例如dataMap中的runHooks(beforeCreateRow, rowIndex, amount, source)见 handsontable/src/dataMap/dataMap.ts返回false可阻止操作继续。每个 Hook 都会收到你传入的source参数因此你可以像处理beforeChange一样跳过对协作者发来的变更的重复广播。用 alter() 应用远程结构性变更要应用来自其他协作者的增删行/列操作调用 Core 的alter()方法并传入相同的source值const configurationOptions { beforeCreateRow(index, amount, source) { if (source remotePeer) { // 放行来自其他协作者的结构性变更 return; } // 把本地结构性变更发送给你的协作后端 }, beforeRemoveRow(index, amount, physicalRows, source) { if (source remotePeer) { return; } // 把本地结构性变更发送给你的协作后端 }, }; // 应用来自其他协作者的结构性变更 hot.alter(insert_row_below, 2, 1, remotePeer);alter()支持的完整操作如下表Action带index时的行为不带index时的行为insert_row_above在index行上方插入行在第一行上方插入行insert_row_below在index行下方插入行在最后一行下方插入行remove_row从index行开始删除行从最后一行开始删除行insert_col_start在index列之前插入列在第一列之前插入列insert_col_end在index列之后插入列在最后一列之后插入列remove_col从index列开始删除列从最后一列开始删除列alter()的完整签名是alter(action, index, amount 1, source, keepEmptyRows)index为可视化索引visual index也支持数组格式[[index, amount], ...]例如hot.alter(remove_row, [[1, 3], [5, 2]])表示删除两个不连续的区间amount默认1表示插入或删除的数量source会透传给相关 Hooks这正是协作场景中区分本地/远程变更的关键keepEmptyRows为true时跳过minRows、minSpareRows、minCols、minSpareCols触发的自动补行/补列逻辑。注意insert_col_start与insert_col_end的行为取决于layoutDirection选项当index超过实际列数时Handsontable 不会补齐中间缺失的列而是在最后一列旁插入新列。关于批量删除的 Hook 触发语义重要陷阱删除行或列时这些 Hook按相邻索引的每一段运行一次而不是每删除一行运行一次。例如按住 Ctrl/Cmd 选中第 0、1、3 行并删除beforeRemoveRow会被调用两次第二次调用描述的数据源已经少了第一次运行删除的行。正确的做法是每个调用到达时立即发送给你的后端并从该次调用的physicalRows参数中读取被删的行。如果跨一次手势收集这些数组再合并成单个列表发送会指向错误的行。同步单元格元数据、评论、合并单元格与边框协作者之间还需要共享不属于单元格值的状态——例如锁定标记、评论、合并区域和自定义边框。单元格元数据setCellMeta() render()setCellMeta()用于写入任意元数据例如用className标记某单元格被其他用户锁定但它不会自行重绘网格——写入后必须调用render()才会生效// 共享任意元数据然后重绘以应用它 hot.setCellMeta(1, 2, className, is-locked-by-remote-user); hot.render();setCellMeta(row, column, key, value)中的row/column为物理索引physical index底层由metaManager.setCellMeta()写入元数据存储见 handsontable/src/core.ts。相应地读取元数据使用getCellMeta()。评论、合并与边框三个插件的同步方法Comments、MergeCells与CustomBorders插件都暴露了可以直接用其他协作者数据调用的方法// 镜像其他协作者留下的评论 hot.getPlugin(comments).setCommentAtCell(1, 2, Reviewed - looks good.); // 镜像其他协作者创建的合并区域 hot.getPlugin(mergeCells).merge(0, 0, 0, 1); // 镜像其他协作者添加的边框 hot.getPlugin(customBorders).setBorders([[1, 1, 1, 1]], { start: { width: 2, color: #2563eb } });评论与单元格元数据的联动Comments插件把评论存储在单元格元数据中因此setCommentAtCell()和removeCommentAtCell()也会触发beforeSetCellMeta与afterSetCellMeta这两个 Hook。如果你已经在通过这两个 Hook 同步单元格元数据就应该在 Hook 里一并处理评论变更避免重复同步。这一联动行为有测试用例佐证见 handsontable/src/plugins/comments/tests/comments.spec.js其中验证了setCommentAtCell会触发afterSetCellMeta回调、beforeSetCellMeta返回false时会阻止评论写入等行为。结果一套完整的协作同步闭环完成本指南后你的网格将具备以下能力检测冲突识别远程更新是否会覆盖本地用户正在编辑的单元格并在本地编辑结束后再应用远程变更广播本地变更通过beforeChange与四个结构性 Hooks把本地数据变更和行/列增删发送给其他协作者并用独立source防止回环镜像远程变更把其他协作者的变更应用到单元格数据、行、列、评论、合并单元格与自定义边框上。值得再次强调的架构边界Handsontable 不负责传输与冲突解决。source标记、beforeChange/结构性 Hooks 拦截、alter()重放这些组合起来的是一套变更接入点体系——真正的消息投递、顺序编排和 OT/CRDT 类冲突合并策略需要由你自己的后端与客户端协议层负责。相关指南Events and hooksCommentsMerge cells相关 API 参考Core 方法alter()getActiveEditor()render()setCellMeta()setDataAtCell()HooksafterSetCellMeta见 handsontable/src/core/hooks/constants.tsbeforeChange见 handsontable/src/core.tsbeforeCreateCol、beforeCreateRow、beforeRemoveCol、beforeRemoveRow见 handsontable/src/core/hooks/constants.tsbeforeSetCellMeta见 handsontable/src/core/hooks/constants.ts插件CommentsCustomBordersMergeCells赞分享前端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点击查看免费下载相关推荐React-Draft-Wysiwyg实时协作编辑5步实现多人同时编辑的终极方案React Draft Wysiwyg实时协作编辑5步实现多人同时编辑的终极方案 React Draft Wysiwyg是一款基于ReactJS和DraftJ前端UI组件Marlin 固件 3 步装好从固件下载到烧录成功点亮的完整流程Marlin 固件 3 步装好从固件下载到烧录成功点亮的完整流程 本文将带你完成 Marlin 固件下载、固件配置与固件烧录的全流程克隆仓库、改对 Conf智能硬件嵌入式固件物联网UNetFormer架构深度解析遥感图像语义分割的技术演进与实战应用UNetFormer架构深度解析遥感图像语义分割的技术演进与实战应用 在 遥感图像语义分割 技术快速发展的当下GeoSeg项目以其创新的 UNetForme人工智能计算机视觉深度学习上一篇视频插帧完整指南Flowframes 免费把 24fps 升格到 60fps下一篇jsTree主题定制终极指南从默认主题到响应式设计创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考