angularjs – 在ui-grid中,ng-grid的“beforeSelectionChange”
|
在ng-grid中,我曾经以下列方式使用beforeSelectionChange：
当用户选择行时,执行ajax调用.当ajax调用发生时,我设置$scope.doingAjaxCall = true,并且为了防止用户更改选择,我在网格定义中有这个： beforeSelectionChange: function () {
return !($scope.doingAjaxCall);
},
如果ajax调用正在发生,它会锁定/冻结选择. 现在,在ui-grid(又名ng-grid 3)中,我不知道什么是afterSelectionChange的等价物. 在本文档的这一部分： > rowSelectionChanges 这些似乎相当于旧的afterSelectionChange 在文档的这一部分： > raiseSelectionEvent(grid,changedRows,event) 但我不明白如何使用它们 重要的提示：
这有点像黑客,但它会完成工作,直到找到更好的解决方案.这是一个工作
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
' ' +
'</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开始).但似乎你在其他地方没有得到太多帮助,所以希望这至少让你开始！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |