当用户选择行时,执行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)
> decisionRaiseSelectionEvent(grid,row,event)
但我不明白如何使用它们
重要的提示:
我正在使用multiSelect:false(即:只能选择一行)
我假设您使用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 ' ' + '</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开始).但似乎你在其他地方没有得到太多帮助,所以希望这至少让你开始!