javascript - Angular UI Grid 在导航时将焦点设置为单元格

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。

这很丑陋，但我在可能被制表的每一列之后都创建了一个“间隔”列。

{ 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() 到下一行。因为用于 Tab 键的正常下一个单元格有 enableCellEdit: false 它会起作用。

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

我认为一个更好的主意可能是重新打开我的错误(链接在上面的评论中)并说你也遇到了问题，看看你是否可以直接回答真正的修复应该是什么! (我很想看到它。)