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

Angular UI Grid set focus to cell on navigate

本文关键字：焦点 设置 单元格 UI Grid 导航 Angular      更新时间：2023-09-26

我有一个可编辑的网格。其中两列是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]);
        }
    });

更新：这是我的专栏Defs:

 $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
    }
}
]

正如我上面所评论的，我认为这是angular ui网格中的一个bug。我的解决方法如下。。。

问题是使用scrollToFocus()转到另一行，但您的正常键盘操作（制表符、向下箭头等）会将您带到具有enableCellEdit: true的列。因此，一种解决方法是将从中调用scrollToFocus()的AFTER列设置为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()。因为正常的下一个选项卡单元格有enableCellEdit: false，所以它可以工作。

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

我认为一个更好的主意可能是重新打开我的bug（链接在上面的评论中），并说你也有问题，看看你是否能得到一个关于真正的解决方案的直接答案！（我很想看。）

相关文章：