使用回車鍵在AG-Grid中導航到下面的單元格

我們需要編輯AG-Grid中的單元格導航，但我找不到滿足需要的方法。這不是一個巨大的變化，但對我們的用戶來說是一個重大變化。我們需要的導航規則與Google Spreadsheet單元格導航類似。使用回車鍵在AG-Grid中導航到下面的單元格

下列規則應適用：

按進入將專注於細胞（默認值）
按再次進入將停止編輯+焦點移動到單元格下方
shift + enter應該停止編輯+移動焦點以上
箭頭鍵和Tab細胞等應像正常

我們使用AngularJS工作。

來源

2017-10-06 Fazmoto

我們結束了在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

來源

2017-10-10 16:30:25 Fazmoto

使用回車鍵在AG-Grid中導航到下面的單元格

回答

相關問題