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

【问题标题】：Angular UI Grid set focus to cell on navigateAngular UI Grid在导航时将焦点设置为单元格
【发布时间】：2016-08-02 06:25:48
【问题描述】：

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

更新：这是我的 columnDefs：

 $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-grid 的错误。当我将它作为一个错误提出时，它已关闭且未修复，并且没有关于解决方法的详细信息。请参阅github.com/angular-ui/ui-grid/issues/4812 和我在stackoverflow.com/questions/33991169/… 的 SO 帖子
我有一个解决方法，适用于我想要跳到下一行的一个字段时，在使用特定值的某个单元格时跳到下一行的情况，但是我意识到它不适用于您的情况您正在使用向下键移动。基本上，它涉及在列定义中使用 enableCellEdit:false 创建假间隔列。如果您可以让您的用户在单元格之间切换，请发布您的列定义，我可以分享解决方法作为可能的答案。
好的。感谢您的答复。我将尝试ag-grid.com 并看看情况如何，因为我已经为 UI-Grid 进行了预输入等工作。它的发展方式最终我将在任何地方进行工作。如果 ag-grid 不起作用，那么我会询问您的解决方法
好的，我不太确定 ag-grid。它没有添加/删除行（不刷新网格），我不确定它是否有单元格导航事件的侦听器，因为我在 GitHub 上看到了一个未解决的问题。我已经更新了我的问题以包含列定义。你能告诉我你的解决方法吗？

标签： javascript angularjs angular-ui-grid

【解决方案1】：

正如我上面评论的，我相信这是 angular-ui-grid 中的一个错误。我的解决方法如下...

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

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

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

所以，在我的情况下，我想捕捉一个从“数量”到“someOtherColumn”的选项卡，如果 row.entity.quantity 的值为 0（例如），那么我将调用 scrollToFocus() 到下一行.因为用于制表符的正常下一个单元格有 enableCellEdit: false 它会起作用。

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

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

【讨论】：