Navigation 使用Enter键导航到AG网格中下面的单元格
我们需要在AG网格中编辑单元格导航,但我没有找到一种方法来做我们需要的事情。这不是一个巨大的变化,但对我们的用户来说是一个至关重要的变化。我们需要的导航规则类似于谷歌电子表格单元格导航 以下规则应适用:Navigation 使用Enter键导航到AG网格中下面的单元格,navigation,cell,edit,ag-grid,Navigation,Cell,Edit,Ag Grid,我们需要在AG网格中编辑单元格导航,但我没有找到一种方法来做我们需要的事情。这不是一个巨大的变化,但对我们的用户来说是一个至关重要的变化。我们需要的导航规则类似于谷歌电子表格单元格导航 以下规则应适用: 按enter键将聚焦单元格(默认) 再次按enter键将停止编辑+将焦点移到下面的单元格中 shift+enter应停止编辑+将焦点移到上方单元格中 箭头键 和标签等应正常工作 我们正在使用AngularJS 编辑: 此功能已添加到AG网格中! 原始(过时)答案: 我们最后在AG网格论坛上
- 按enter键将聚焦单元格(默认)
- 再次按enter键将停止编辑+将焦点移到下面的单元格中
- shift+enter应停止编辑+将焦点移到上方单元格中
- 箭头键 和标签等应正常工作
gridDiv.addEventListener('keydown', function(evt) {
if(editing && evt.key === 'Enter') {
var currentCell = gridOptions.api.getFocusedCell();
var finalRowIndex = gridOptions.api.paginationGetRowCount()-1;
// If we are editing the last row in the grid, don't move to next line
if (currentCell.rowIndex === finalRowIndex) {
return;
}
gridOptions.api.stopEditing();
gridOptions.api.clearFocusedCell();
gridOptions.api.startEditingCell({
rowIndex: currentCell.rowIndex + 1,
colKey: currentCell.column.colId
});
}
});
编辑标志在网格选项中手动管理
var editing = false;
var gridOptions = {
columnDefs: columnDefs,
rowData: students,
onCellEditingStarted: function (evt) {
editing = true;
},
onCellEditingStopped: function (evt) {
editing = false;
}
};
下面是一个有效的plunker示例:您还可以使用“keydown”事件全局跟踪最后一个按下的键,这是您答案的变体
let eventKey;
let validKeys = ['Enter'];
gridDiv.addEventListener('keydown', function(event) {
eventKey = event.key;
});
onCellEditingStopped: function (event) {
if(validKeys.includes(eventKey)){
var currentCell = gridOptions.api.getFocusedCell();
var finalRowIndex = gridOptions.api.paginationGetRowCount()-1;
if (currentCell.rowIndex === finalRowIndex) {
return;
}
gridOptions.api.startEditingCell({
rowIndex: currentCell.rowIndex + 1,
colKey: currentCell.column.colId
});
}
}
很好的方法,我添加了api.clearRangeSelection();就在clearFocusedCell()之后,因为我的主题以灰色背景显示上一行。