如何在UI Grid的页脚中获取自定义聚合总计

时间:2018-04-24 20:36:59

标签: angularjs angular-ui-grid ui-grid

有没有办法在UI-Grid中获得自定义总计?

例如,我有以下Plunkr

我想只添加名字为Terry Clay和Nieves Mack的行,并将其显示为总数。 I.E:我想要一个特定行数的总和。它可行吗?我一直在寻找一种方法来实现它,然后到了<div class="pricing1box"> <div class="pricing1box-div"> <img src="http://placehold.it/350x150.png"> <h6 style="color: black; padding: 10px;">Title</h6> <p style="font: 10px blue;">Powered by me</p> <p>A dgdfg dfgdhdgfh fdgh dhdfg wertdfg dfgdh ergdfgd egr dfgdhd hdfh </p> </div> </div>customTreeAggregationFn,如plunkr所示。但是,我不确定如何访问这些特定行中的值以将其添加并显示为页脚的一部分。

这是Plunkr中的代码

customTreeAggregationFinalizerFn

请帮助,我遇到了一些UI Grid的问题而且缺乏支持,所以希望情况并非如此。

1 个答案:

答案 0 :(得分:0)

我设法搞清楚了。为了添加特定的行,我编写了一个返回它的函数。 Here's the plunkr

这是代码。

$scope.gridOptions = {
    showGridFooter: true,
    showColumnFooter: true,
    enableFiltering: true,
    columnDefs: [
        { field: 'name', width: '13%' },
        { field: 'address.street',aggregationType: uiGridConstants.aggregationTypes.sum, width: '13%' },
        { field: 'age', aggregationType: uiGridConstants.aggregationTypes.avg, aggregationHideLabel: true, width: '13%' },
        { name: 'ageMin', field: 'age', aggregationType: uiGridConstants.aggregationTypes.min, width: '13%', displayName: 'Age for min' },
        { name: 'ageMax', field: 'age', aggregationType: uiGridConstants.aggregationTypes.max, width: '13%', displayName: 'Age for max' },
        { name: 'customCellTemplate', field: 'age', width: '14%', 
          aggregationType: function ()
          {
            if(!$scope.gridApi)
                return 0;
            var sum = 0;

            //if it is filtered/sorted you want the filtered/sorted rows only)
            var visibleRows = $scope.gridApi.core.getVisibleRows($scope.gridApi.grid);

            for (var i = 0; i < visibleRows.length; i++) {
              if(visibleRows[i].entity.name === 'Sandoval Mclean' || visibleRows[i].entity.name === 'Nieves Mack') {

                  //you have to parse just in case the data is in string otherwise it will concatenate
                  sum += parseInt(visibleRows[i].entity.age);
              }
            }
            return sum;
          },
        },
        { name: 'registered', field: 'registered', width: '20%', cellFilter: 'date', footerCellFilter: 'date', aggregationType: uiGridConstants.aggregationTypes.max }
    ],
    data: data,
    onRegisterApi: function(gridApi) {
            $scope.gridApi = gridApi;
    }
};

aggregationType函数是魔术发生的地方,我只添加具有特定名称的行。