ui-grid中与ng-grid的"beforeSelectionChange"相对应的是什么？

Question

ui-grid中与ng-grid的"beforeSelectionChange"相对应的是什么？

8

在 `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（即只能选择一行）。

- sports

太遗憾了，没有相对应的东西。如果没有这个，我不能从ng-grid转移到ui-grid。 - sports

这方面有任何消息吗？一年后了？ - sports

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lebolo · 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），您需要检查更新逻辑，在进行AJAX调用时，您可能应该通过可视化方式告知用户正在发生某些事情等等。

更好的解决方案是分叉存储库并添加自己的beforeSelectionChange逻辑（可能从这里开始）。但似乎您在其他地方没有得到太多帮助，所以希望这至少能为您提供一些启示！

- PaulL · Answer 2

ui-grid提供了相应的工具，我不确定是否有“ui-grid”的方式，但肯定有兼容的方法可以实现。

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

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

如果用户在ajax调用运行时尝试选择一行，则将选择设置回原来的位置。这意味着您需要监听selectionChanged和selectionChangedBatch事件，跟踪所需的选择，并跟踪ajax调用何时正在进行。
使用一个isRowSelectable函数，如果ajax调用正在运行，则不允许选择任何行。该函数本身类似于您以前在ng-grid中使用的函数，即return !$scope.doingAjaxCall。不同之处在于，每当更改$scope.doingAjaxCall的值时，您需要调用notifyDataChange。从记忆中得知，使行对用户不可选仍然允许通过代码选择它-因此，这不会改变选择该行的事实。

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

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

我建议您在plunker中尝试一下，如果遇到困难，我可以提供建议。我现在没有时间从头开始编写它。