当用户选择行时,执行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开始).但似乎你在其他地方没有得到太多帮助,所以希望这至少让你开始！
