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>'
);

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

selectButtonClick

正如我所提到的，这非常hacky！有更好的方法可以覆盖模板（例如$scope.clickConditions = function() { // Check for any other conditions you need return !$scope.doingAjaxCall; };），当覆盖模板时你需要check the logic when updating，你应该让用户知道发生了什么事情直观当执行AJAX调用等时

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

Answer 2

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

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

设置multiSelect: false

我可以看到两种方法来获得结果：

如果用户在ajax调用运行时尝试选择一行，请将选择设置回原处。这意味着您必须收听selectionChanged和selectionChangedBatch事件，跟踪您想要的选择，并跟踪ajax调用的进行时间。
使用isRowSelectable函数，如果正在运行ajax调用，则不会选择任何行。该函数本身类似于您以前使用ng-grid的函数，即return !$scope.doingAjaxCall。不同之处在于，每当您更改notifyDataChange的值时，都需要致电$scope.doingAjaxCall。从内存中排除用户无法选择的行仍然允许在代码中选择它 - 所以这不会改变选择行的行。

我可能会选择第二种选择。

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

我建议你去找一个东西，然后如果你有困难我可以查看并提供建议。我现在没时间从头开始写它。

什么相当于ng-grid＆＃34; beforeSelectionChange＆＃34;在ui-grid中？

2 个答案: