使用回车键在AG-Grid中导航到下面的单元格

问题描述：

我们需要编辑AG-Grid中的单元格导航，但我找不到满足需要的方法。这不是一个巨大的变化，但对我们的用户来说是一个重大变化。我们需要的导航规则与Google Spreadsheet单元格导航类似。使用回车键在AG-Grid中导航到下面的单元格

下列规则应适用：

按进入将专注于细胞（默认值）
按再次进入将停止编辑+焦点移动到单元格下方
shift + enter应该停止编辑+移动焦点以上
箭头键和Tab细胞等应像正常

我们使用AngularJS工作。

答

我们结束了在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=preview

使用回车键在AG-Grid中导航到下面的单元格

相关推荐