Javascript 角度UI网格在导航时将焦点设置为单元格
我有一个可编辑的网格。其中两列是ItemCode和Quantity。当用户输入数量并按下向下键时,我希望下一行将焦点设置在下一行的ItemCode单元格上。我添加了这个事件监听器,它会进入单元格,但它会快速闪烁到编辑模式,然后闪烁到选定模式。如何确保单元格保持编辑模式Javascript 角度UI网格在导航时将焦点设置为单元格,javascript,angularjs,angular-ui-grid,Javascript,Angularjs,Angular Ui Grid,我有一个可编辑的网格。其中两列是ItemCode和Quantity。当用户输入数量并按下向下键时,我希望下一行将焦点设置在下一行的ItemCode单元格上。我添加了这个事件监听器,它会进入单元格,但它会快速闪烁到编辑模式,然后闪烁到选定模式。如何确保单元格保持编辑模式 gridApi.cellNav.on.navigate($scope, function (newRowcol, oldRowCol) { $scope.$broadcast('uiGridEventEndCellEdit
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
}
}
]
如上所述,我认为这是angular ui网格中的一个bug。我的解决方法如下 问题是使用
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()
到下一行。因为用于制表的正常下一个单元格具有enableCellEdit:false
,所以它可以工作
现在对于您的情况,我不确定它是否有帮助,因为您使用的是向下箭头键,这意味着您不能使用正常的键盘操作更改列。但也许它给了你一个想法。(此外,如果您的用户选择tab而不是向下箭头,则您可以使用变通方法,甚至可能不需要它,具体取决于您拥有的其他列。)
我认为更好的办法可能是重新打开我的bug(在上面的评论中链接),并说你也有问题,看看你是否能得到一个关于真正的修复应该是什么的直接答案!(我很想看看。)我相信这是一个带有角度ui网格的bug。当我把它作为一个bug提出来时,它被关闭了,没有修复,也没有解决方法的细节。请参阅和我在我的SO帖子,我有一个变通方法,适用于我想在使用某个值通过某个单元格时跳转到下一行的字段的情况,但是我意识到这不适用于使用向下键移动的情况。基本上,它涉及在列定义中使用enableCellEdit:false创建假间隔列。如果您可以要求用户在单元格之间进行制表,发布您的列定义,我可以将解决方法作为可能的答案与您分享。好的。谢谢你的回复。我将尝试看看这是如何进行的,因为我已经有了一个针对typeahead等的UI网格的变通方法。按照这种方式,我将在所有地方找到变通方法。如果ag grid不起作用,那么我将询问您的解决方法我对ag grid不太确定。它没有添加/删除行(不刷新网格),我不确定它是否有单元格导航事件的侦听器,因为我在GitHub上看到了一个未解决的问题。我已经更新了我的问题,将defs列包括在内。你能告诉我你的解决方法吗?