AG-Gridの下にあるセルに移動するには、Enterキーを使用してください。

Question

セルナビゲーションを編集する必要があります。AG-Grid私は必要なものを見つける方法がありません。これは大きな変更ではありませんが、ユーザーのための重要な変更です。 Googleが必要とするナビゲーションルールは、Google Spreadsheetセルナビゲーションに似ています。

次の規則が適用されなければならない：を押すを押す

• はは、細胞が（デフォルトで）焦点を当てる入力し
• は再びを入力
下のセルにフォーカスを移動+ を編集して停止します
• シフトフォーカスを移動セルに
上記矢印キー およびタブなどが我々はAngularJSを使用している通常の

のように動作するはずです。

Answer 1

私たちはAG-Gridフォーラムに頼んだ。これを行うには簡単で清潔な方法はありませんでした。基本的には、 'Enter'が押されていることを聞くイベントをグリッドに追加し、手動でフォーカスを1行下に移動します。

「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