ng-grid 在 ui-grid 中的“beforeSelectionChange”相当于什么?

2024-03-12

In ng-grid,我以前用过beforeSelectionChange通过以下方式:

当用户选择一行时,将执行 ajax 调用。当 ajax 调用发生时我设置$scope.doingAjaxCall = true,并为了防止用户更改选择,我在网格定义中添加了以下内容:

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

它锁定/冻结正在发生的 ajax 调用的选择。

Now, in ui-grid(又名 ng-grid 3),我不知道相当于什么afterSelectionChange.

在文档的这一部分中:
http://ui-grid.info/docs/#/api/ui.grid.selection.api:PublicApi 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 http://ui-grid.info/docs/#/api/ui.grid.selection.service:uiGridSelectionService
我看到这两种方法似乎与需求相关:

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

但我不明白如何使用它们

重要的提示:
我在用着multiSelect: false(即:只能选择一行)


这有点像黑客,但它会完成工作,直到您找到更好的解决方案。这是一个工作plunker http://plnkr.co/edit/SuJxNQ?p=preview.

我假设你使用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()被评估before调用实际的点击逻辑。如果它是假的,那么selectButtonClick处理内部选择逻辑的 永远不会被调用。

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

正如我提到的,这非常 hacky!有更好的方法来覆盖模板(例如ui-grid/selectionRowHeaderButtons),当覆盖模板时,你必须检查更新时的逻辑 http://ui-grid.info/docs/#/tutorial/317_custom_templates,你应该让用户知道发生了什么事visually当执行 AJAX 调用时等

更好的解决方案是分叉存储库并添加您自己的beforeSelectionChange逻辑(可能开始here https://github.com/angular-ui/ui-grid/blob/master/src/features/selection/js/selection.js#L460)。但似乎您在其他地方没有得到太多帮助,所以希望这至少能让您开始!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ng-grid 在 ui-grid 中的“beforeSelectionChange”相当于什么? 的相关文章

随机推荐