ui-grid 中 ng-grid 的“beforeSelectionChange”的等价物是什么？

Question

在ng-grid中，我以前使用beforeSelectionChange的方式如下：

当用户选择一行时，将执行 ajax 调用。当 ajax 调用发生时，我设置了$scope.doingAjaxCall = true，为了防止用户更改选择，我在网格定义中有这个：

beforeSelectionChange: function () {
    return !($scope.doingAjaxCall);
},

如果发生 ajax 调用，它会锁定/冻结选择。

现在，在 ui-grid（又名 ng-grid 3）中，我不知道 afterSelectionChange 的等价物是什么。

在文档的这一部分：
http://ui-grid.info/docs/#/api/ui.grid.selection.api:PublicApi
我看到两个事件：

• rowSelectionChanges
• rowSelectionChangedBatch。

这些似乎相当于旧的afterSelectionChange

在文档的这一部分：
http://ui-grid.info/docs/#/api/ui.grid.selection.service:uiGridSelectionService
我看到这两种方法似乎与需求有关：

• raiseSelectionEvent(grid, changedRows, event)
• decideRaiseSelectionEvent(grid, row, changedRows, event)

但我不明白如何使用它们

重要提示：
我用的是multiSelect: false（即：只能选择一行）

Answer 1

这有点小技巧，但在您找到更好的解决方案之前，它会完成工作。这是一个有效的plunker。

我假设您使用 rowSelectionChanged 来执行 AJAX 调用并切换 doingAjaxCall。

gridApi.selection.on.rowSelectionChanged($scope, function(row) {
  $log.log('Row ' + row.entity.id + ' selected: ' + row.isSelected);

  $log.log('  Simulating ajax call...');
  $scope.doingAjaxCall = true;
  $timeout(function() {
    $log.log('  ...done with ajax call');
    $scope.doingAjaxCall = false;
  }, 2000);
});

然后，修改 ui-grid 用于选择按钮的模板。

$templateCache.put('ui-grid/selectionRowHeaderButtons',
  '<div ' +
  '  class="ui-grid-selection-row-header-buttons ui-grid-icon-ok" ' +
  '  ng-class="{\'ui-grid-row-selected\': row.isSelected}" ' +
  '  ng-click="grid.appScope.clickConditions() && selectButtonClick(row, $event)"> ' + // Modified template here
  '  &nbsp; ' +
  '</div>'
);

这样，$scope.clickConditions() 在调用实际点击逻辑之前进行评估。如果它是虚假的，那么处理内部选择逻辑的selectButtonClick 永远不会被调用。

$scope.clickConditions = function() {
  // Check for any other conditions you need
  return !$scope.doingAjaxCall;
};

正如我所提到的，这非常hacky！有更好的方法来覆盖模板（例如ui-grid/selectionRowHeaderButtons），当覆盖模板时你必须check the logic when updating，你应该让用户知道在AJAX调用时视觉上发生了一些事情执行等。

更好的解决方案是分叉 repo 并添加您自己的 beforeSelectionChange 逻辑（可能从 here 开始）。但似乎你在其他地方没有得到太多帮助，所以希望这至少能让你开始！

Answer 2

ui-grid 提供了执行此操作的工具，我不确定是否有“ui-grid”方式，但肯定有兼容的方式。

根据您的描述，我假设您只允许单选，因为如果您允许多选，他们可以继续添加选择，并且您将在后台运行 ajax。所以我假设你设置multiSelect: false 每http://ui-grid.info/docs/#/tutorial/210_selection

我可以看到两种获取结果的方法：

1. 如果用户在 ajax 调用运行时尝试选择一行，请将选择设置回原来的位置。这意味着您必须监听 selectionChanged 和 selectionChangedBatch 事件，跟踪您想要的选择，并跟踪 ajax 调用何时进行。

2. 使用 isRowSelectable 函数，如果 ajax 调用正在运行，则该函数不允许选择任何行。该功能本身类似于您以前使用 ng-grid 的功能，即return !$scope.doingAjaxCall。不同之处在于，每当您更改$scope.doingAjaxCall 的值时，您都需要调用notifyDataChange。从内存中使用户无法选择的行仍将允许在代码中选择它 - 所以这不会改变该行被选中。

我可能会选择第二个选项。

按要求添加信息：isRowSelectable 在上面提到的教程中（有一个工作示例）。唯一的窍门是我觉得它只是在特定事件上重新评估，所以当您更改 doingAjaxCall 变量时，它可能不会自动从每个项目中删除选择。因此我建议拨打notifyDataChange，这也在教程中。

我建议你试试看，如果你有困难，我可以看看并提供建议。我现在没有时间从头开始写。