Question

我在下拉列表中获得一个新行点击并使用enableCellEditOnFocus当我尝试打开下拉菜单时，它没有打开，并且备用下拉列表正常运行。为了避免混淆，我改变了代码，我正在显示给我错误的代码，这里是my plunker。

这是我的ui-grid对象

 $scope.gridOptions = {
enableCellEditOnFocus: true 
};
  $scope.gridOptions.columnDefs = [
{ name: 'gender', displayName: 'Gender', editableCellTemplate: 'ui-grid/dropdownEditor', width: '20%', 
   editDropdownValueLabel: 'gender', editDropdownOptionsArray: [
  { id: 1, gender: 'male' }, 
  { id: 2, gender: 'female' } 
] }  ];

我使用以下代码添加新行：

$scope.addNewRow = function () {
    $scope.gridOptions.data.push({
    "gender": "male"});
};
//adding new row inside of uigrid
$scope.newRow = function (row, columnIndex) {
    tempIndexSave = "";
    tempIndexSave = _.indexOf($scope.gridOptions.data, row);
    var length = $scope.gridOptions.data.length;
    if (length - 1 == tempIndexSave) {
        $scope.addNewRow();
    }
};

Answer 1

问题归因于these lines您可以看到那里的屏幕阅读器黑客攻击。

此hack可能会带来与您类似的问题，因为它取决于beginCellEdit和afterCellEdit事件均匀触发并具有固定模式：

beginCellEdit
afterCellEdit
beginCellEdit
afterCellEdit
beginCellEdit

...

在编辑行时添加新行会破坏此模式，因为对于新创建的行，您缺少beginCellEdit，因此preventMouseDown函数将始终触发，从而阻止用户交互。

我提出了一个解决方法，但如果您想保持与屏幕阅读器的兼容性（请参阅我链接到的文件中的行之前的注释），我不建议您使用此方法，因为解决方法可能会破坏黑客攻击

解决方法包括在添加行时添加假beginCellEdit，如this updated plunkr中所示。

...
if (length - 1 == tempIndexSave) {
  $scope.addNewRow();
  $scope.gridApi.edit.raise.beginCellEdit();
}
...

ui-grid内部的下拉开启问题

1 个答案: