我们需要编辑AG-Grid中的单元格导航,但我没有找到一种方法来完成我们需要的操作。这不是一个巨大的变化,但对我们的用户来说却是至关重要的变化。我们需要的导航规则类似于 Google Spreadsheet 单元格导航。
应适用以下规则:
我们正在使用 AngularJS。
编辑:
此功能已添加到AG-Grid! 文档在这里。
原始(已过时)答案:
我们最终在 AG-Grid 论坛上询问。没有简单或干净的方法可以做到这一点。基本上,您向网格添加一个事件,该事件侦听按下“Enter”的声音,然后手动将焦点向下移动一行。
当“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 示例:
https://plnkr.co/edit/quhyS05SSVzmuDlCErZD?p=预览
您还可以使用“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
});
}
}
在 ag-grid 上,您可以设置 2 个输入来实现 Enter 键的 Excel 样式行为: EnterNavigatesVertically 和 EnterNavigatesVerticallyAfterEdit。
请参阅文档:https://www.ag-grid.com/angular-data-grid/cell-editing-start-stop/#enter-key-navigation