Angular UI 导航时网格将焦点设置到单元格

Question

我有一个可编辑的网格。其中两列是 ItemCode 和 Quantity。当用户输入数量并按下向下键时，我希望下一行将焦点设置在下一行的 ItemCode 单元格上。我添加了这个事件侦听器，它进入了单元格，但它很快进入编辑模式，然后进入选定模式。如何确保单元格处于编辑模式？

gridApi.cellNav.on.navigate($scope, function (newRowcol, oldRowCol) {
    $scope.$broadcast('uiGridEventEndCellEdit');

    if (oldRowCol != null && 
        oldRowCol.col.colDef.name == 'quantity' && 
        oldRowCol.row != newRowcol.row) {
        newRowcol.row.grid.api.cellNav
            .scrollToFocus(newRowcol.row.entity, 
                            newRowcol.row.grid.options.columnDefs[1]);
        }
    });

更新：这是我的专栏定义：

 $scope.gridOptions.columnDefs = [
 {
    name: 'itemCode',
    displayName: 'Part #',
    editableCellTemplate: $scope.itemCodeEditableTemplate,
    width: 150,
    cellTooltip: function (row, col) {
        return row.entity.itemCode
    }
},
{
    name: 'quantity', displayName: 'Qty', type: 'number', width: 60, 
    cellTooltip: function (row, col) {
      return row.entity.quantity
    }
}
]

Answer 1

正如我在上面评论的那样，我认为这是 angular-ui-grid 中的错误。我的解决方法如下...

问题是使用 scrollToFocus() 转到另一行，但您的正常键盘操作（制表符、向下箭头等）会将您带到具有 enableCellEdit: true 的列。因此，一种解决方法是将您调用 scrollToFocus() 的列设置为 enableCellEdit: false.

它很难看，但我在每一列之后都创建了一个 "spacer" 列，可以从中选择标签。

{ name: 'itemCode', displayName: 'part #' },
{ name: 'quantity', displayName: 'qty' },
{ name: '_spacer1', displayName: '', width: '0%', minWidth: 1, maxWidth: 1, enableCellEdit: false },
{ name: 'someOtherColumn', displayName: 'something'},

所以，在我的例子中，我想捕捉一个从 "quantity" 到 "someOtherColumn" 的标签，如果 row.entity.quantity 的值是 0（例如），那么我会调用 scrollToFocus() 到下一行。因为用于制表符的正常下一个单元格有 enableCellEdit: false 它可以工作。

现在对于你的情况，我不确定它是否有帮助，因为你正在使用向下箭头键，这意味着你不是通过正常的键盘操作来更改列。但也许它给了你一个想法。（此外，如果您的用户使用 Tab 而不是向下箭头，那么您可以使用解决方法，或者甚至可能不需要它，具体取决于您拥有的其他列。）

我认为一个更好的主意可能是重新打开我的错误（链接在上面的评论中）并说你也有问题，看看你是否能得到一个直接的答案，说明真正的问题是什么修复应该是！（我很想看。）

Angular UI 导航时网格将焦点设置到单元格

Angular UI Grid set focus to cell on navigate

javascript

angularjs

angular-ui-grid