咨询:编辑单元格按回车后自动跳转同列下格并开启编辑的实现
解决单元格回车后跳转并自动编辑的问题
你的代码存在几处关键问题,导致功能无法实现:
editCell方法参数传递错误,第二个参数应为列索引或列对象,而非当前的activeCell对象;- 调用
focusCell后,activeCell不会立即更新,直接复用原activeCell的索引计算会出错; - 未阻止回车键的默认行为,网格原生的回车逻辑会干扰自动编辑流程。
修正后的代码如下:
onKeyDown($event: KeyboardEvent) { // 阻止回车默认行为,避免原生逻辑干扰 $event.preventDefault(); if ($event.key === 'Enter' && this.grid.activeCell?.colIndex === 9) { const currentRow = this.grid.activeCell.rowIndex; const targetCol = this.grid.activeCell.colIndex; const targetRow = currentRow + 1; // 聚焦目标单元格 this.grid.focusCell(targetRow, targetCol); // 开启目标单元格编辑,参数对应目标行索引、列索引、数据项 this.grid.editCell(targetRow, targetCol, this.grid.data[targetRow]); } }
额外注意事项:
- 如果你的网格数据存储方式不是
this.grid.data,请替换为对应的数据获取方式; - 加入
?.可选链操作符,避免activeCell为null时出现报错; - 必须执行
preventDefault(),否则网格默认的回车提交行为会导致自动编辑失效。
内容的提问来源于stack exchange,提问作者Artyom Shmarlovsky
相关产品推荐
相关产品推荐

