2016-09-19 55 views
1

在Ui-Grid表中,我使用聚合函数,但在agg上:在控制台中删除出错.After后:删除不能在其他列上应用聚合函数。angularjs - Angular UI Grid Bug - Agg:删除不起作用

check this image for error类型错误:aggregation.col.treeAggregationFn不是一个函数

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.grouping' ]); 

    app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridGroupingConstants', function ($scope, $http, $interval, uiGridGroupingConstants) { 
     $scope.gridOptions = { 
     enableFiltering: true, 
     treeRowHeaderAlwaysVisible: false, 
     columnDefs: [ 
      { name: 'name', width: '30%' }, 
      { name: 'gender', grouping: { groupPriority: 1 }, sort: { priority: 1, direction: 'asc' }, width: '20%', cellFilter: 'mapGender' }, 
      { name: 'age', treeAggregationType: uiGridGroupingConstants.aggregation.MAX, width: '20%' }, 
      { name: 'company', width: '25%' }, 
      { name: 'registered', width: '40%', cellFilter: 'date', type: 'date' }, 
      { name: 'state', grouping: { groupPriority: 0 }, sort: { priority: 0, direction: 'desc' }, width: '35%', cellTemplate: '<div><div ng-if="!col.grouping || col.grouping.groupPriority === undefined || col.grouping.groupPriority === null || (row.groupHeader && col.grouping.groupPriority === row.treeLevel)" class="ui-grid-cell-contents" title="TOOLTIP">{{COL_FIELD CUSTOM_FILTERS}}</div></div>' }, 
      { name: 'balance',cellTemplate:'<a>Balance</a>', width: '25%', cellFilter: 'currency', treeAggregationType: uiGridGroupingConstants.aggregation.AVG, customTreeAggregationFinalizerFn: function(aggregation) { 
      aggregation.rendered = ''; 
      } } 
     ], 
     onRegisterApi: function(gridApi) { 
      $scope.gridApi = gridApi; 
     } 
     }; 

     $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json') 
     .success(function(data) { 
      for (var i = 0; i < data.length; i++){ 
      var registeredDate = new Date(data[i].registered); 
      data[i].state = data[i].address.state; 
      data[i].gender = data[i].gender === 'male' ? 1: 2; 
      data[i].balance = Number(data[i].balance.slice(1).replace(/,/,'')); 
      data[i].registered = new Date(registeredDate.getFullYear(), registeredDate.getMonth(), 1) 
      } 
      delete data[2].age; 
      $scope.gridOptions.data = data; 
     }); 

     $scope.expandAll = function(){ 
     $scope.gridApi.treeBase.expandAllRows(); 
     }; 

     $scope.toggleRow = function(rowNum){ 
     $scope.gridApi.treeBase.toggleRowTreeState($scope.gridApi.grid.renderContainers.body.visibleRowCache[rowNum]); 
     }; 

     $scope.changeGrouping = function() { 
     $scope.gridApi.grouping.clearGrouping(); 
     $scope.gridApi.grouping.groupColumn('age'); 
     $scope.gridApi.grouping.aggregateColumn('state', uiGridGroupingConstants.aggregation.COUNT); 
     }; 

     $scope.getAggregates = function() { 
     var aggregatesTree = []; 
     var gender 

     var recursiveExtract = function(treeChildren) { 
      return treeChildren.map(function(node) { 
      var newNode = {}; 
      angular.forEach(node.row.entity, function(attributeCol) { 
       if(typeof(attributeCol.groupVal) !== 'undefined') { 
       newNode.groupVal = attributeCol.groupVal; 
       newNode.aggVal = attributeCol.value; 
       } 
      }); 
      newNode.otherAggregations = node.aggregations.map(function(aggregation) { 
       return { colName: aggregation.col.name, value: aggregation.value, type: aggregation.type }; 
      }); 
      if(node.children) { 
       newNode.children = recursiveExtract(node.children); 
      } 
      return newNode; 
      }); 
     } 

     aggregatesTree = recursiveExtract($scope.gridApi.grid.treeBase.tree); 

     console.log(aggregatesTree); 
     }; 
    }]) 
    .filter('mapGender', function() { 
     var genderHash = { 
     1: 'male', 
     2: 'female' 
     }; 

     return function(input) { 
     var result; 
     var match; 
     if (!input){ 
      return ''; 
     } else if (result = genderHash[input]) { 
      return result; 
     } else if ((match = input.match(/(.+)(\(\d+\))/)) && (result = genderHash[match[1]])) { 
      return result + match[2]; 
     } else { 
      return input; 
     } 
     }; 
    }); 

Here is plunkr 
https://plnkr.co/edit/lTkddSNhfLPHQfuldWfs?p=preview 

回答

0

这似乎是UI形栅格的错误。

要解决它,直到它被修复为止我建议在正在取消分组的列上手动取消脚注聚合。使用下面的代码来做到这一点:

column.treeFooterAggregation = undefined; 
column.aggregationType = undefined; 
column.aggregationValue = undefined; 
+0

有没有一种方法来确定所有的分组列并执行此操作。我有一个网格,用户将多个列组作为他的数据分析的一部分,然后希望通过删除所有分组来恢复/重置。当clearGrouping函数被调用时,会抛出上面提到的错误。 –

+0

使用该事件并使用属性treeAggregation.type来检查聚合是否被删除,如下所示gridAPI.grouping.on.aggregationChanged(作用域,函数(列){if(column.treeAggregation.type){column.treeFooterAggregation = {column.treeAggregation.type} { } undefined; column.aggregationType = undefined; column.aggregationValue = undefined;}}) – varmabsrk