Question

我有一个应用程序，它使用带有cellNav的ui-grid，并使用editOnFocus = true编辑某些列。我遇到的问题是编辑功能中的END_CELL_EDIT和CANCEL_CELL_EDIT始终调用gridCtrl.focus（）。如果我有一个可编辑的单元格聚焦，然后单击网格外的输入，它将窃取焦点并将其放回网格中。

我点击网格外的输入会发生什么。它获得了关注。同时触发END_CELL_EDIT事件。然后调用gridCtrl.focus（）并将焦点从外部输入框中取出。

有没有办法在ui-grid.edit中覆盖此行为？为什么这种行为是标准的？

这是一个展示的plnkr。如果单击年龄列使其进入编辑模式，然后单击文本区域，您将看到它暂时获得焦点并有一个光标，但然后很快网格会将焦点移回，您无法再编辑。

http://plnkr.co/edit/Sg1dTcsMN0zNRDmauwoT 这种行为对我的情况并不理想，因为无论何时选择或导航到行，我们都会自动关注特定单元格（进入编辑模式）。因此，任何更改行或将焦点移动到网格之外的操作都会触发END_CELL_EDIT事件和上述焦点行为。

Answer 1

诀窍是建立另一个焦点，但是通过摘要周期延迟它 - 从而允许网格做它需要的东西。相关代码剪辑 - 来自您下面更新的Plunker。

HTML（用于绑定）：

<textarea id="textarea" ng-focus="delayFocus()"></textarea>

控制器（允许摘要周期）：

$scope.delayFocus = function() {
  $timeout(function() {
    focus('textarea');
    $scope.gridApi.grid.cellNav.clearFocus();
  });
}

工厂（用于重新聚焦）：

app.factory('focus', function($timeout, $window) {
  return function(id) {
    // timeout makes sure that it is invoked after any other event has been triggered.
    // e.g. click events that need to run before the focus or
    // inputs elements that are in a disabled state but are enabled when those events
    // are triggered.
    $timeout(function() {
      var element = $window.document.getElementById(id);
      if (element)
        element.focus();
    });
  };
});

更新了Plunker，http://plnkr.co/edit/UX8tbVwi9gG4zsMRG0kV?p=preview。

您可以将上述内容合并到一个指令中，然后将其应用于所需的控件 - 如果需要/需要，很乐意提供帮助。

希望，这会让你有一个良好的开端。

使用CellNav + Edit会导致网格从网格外部的输入中窃取焦点

1 个答案: