这有点像黑客,但它会完成工作,直到您找到更好的解决方案。这是一个工作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
' ' +
'</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)。但似乎您在其他地方没有得到太多帮助,所以希望这至少能让您开始!