ui-grid中下拉菜单无法打开的问题

Question

当我点击下拉菜单并使用enableCellEditOnFocus时，我会得到一个新的行，但当我尝试打开下拉菜单时，它没有打开，而备用下拉菜单正常工作。为避免混淆，我修改了代码，并显示了给我错误的代码部分，这里是我的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();
    }
};

- Syed Rasheed

---

你想实现的功能不是很直接。你想在用户开始编辑现有行时添加一行新数据？如果是，为什么你要这个功能呢？为什么不将添加新行部分与编辑分开处理？也许你可以添加一个按钮来添加新行... - Ganesh Kumar

@GaneshKumar 实际上这是客户的要求，他希望在下面的网格下方有一个保存按钮，可以保存所有网格数据。 - Syed Rasheed

那么每次用户点击下拉菜单，您都想添加一行新的吗？ - Ganesh Kumar

是的，我想要一个新行，我也得到了一个新行，但是其中的下拉菜单无法工作，在上面您可以看到我的 Plunker。 - Syed Rasheed

可能的原因之一是添加新行可能会干扰编辑功能。因为，如果我通过网格外部的按钮添加新行，则下拉菜单会正常显示。 - Ganesh Kumar

Answer 1

问题出在这些行，你可以看到这里有一个面向屏幕阅读器的hack。

这个hack可能会带来与你类似的问题，因为它依赖于beginCellEdit和afterCellEdit事件以固定模式平均触发：

• beginCellEdit
• afterCellEdit
• beginCellEdit
• afterCellEdit
• beginCellEdit

...

在编辑行时添加新行会破坏这种模式，因为对于新创建的行，你缺少一个beginCellEdit，所以preventMouseDown函数将始终触发，防止用户交互。

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

解决方法包括在添加行时引发一个虚假的beginCellEdit，如您可以在this updated plunkr中看到。

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

- imbalind

---

谢谢，伙计...这就是我想要的 :) - Syed Rasheed