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

Posted 2023-02-19

【中文标题】ui-grid 中 ng-grid 的“beforeSelectionChange”的等价物是啥？

【英文标题】：Whats the equivalent for ng-grid's "beforeSelectionChange" in ui-grid?ui-grid 中 ng-grid 的“beforeSelectionChange”的等价物是什么？

【发布时间】：2015-11-13 01:54:00

【问题描述】：

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

【问题讨论】：

太糟糕了，没有等价物。没有这个，我不能从 ng-grid 移动到 ui-grid

...有这方面的消息吗？一年后？

【参考方案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 开始）。但似乎你在其他地方没有得到太多帮助，所以希望这至少能让你开始！

【讨论】：

但不同的网格将共享$scope.clickConditinions，即使其中一个正在触发 ajax 调用。抱歉，我更倾向于寻找官方的 ui-grid 方式 :( -- 已经有一些功能（decideRaiseSelectionEvent 等），但在文档中不清楚如何使用它们......

【参考方案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，这也在教程中。

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

【讨论】：

是的，我正在使用multiselect: false（现在将使用该信息编辑原始问题）

您能否提供第二个选项的示例代码？我不清楚isRowSelectable 是否属于ui-grid。

我已按要求添加内容。

@PaulL 关于这个***.com/questions/39271440/… 我想将我的ui-grid中的选择限制为10。如何实现？