【问题标题】:Read the sum value from the column footer in UI - Grid?从 UI - Grid 中的列页脚读取总和值?
【发布时间】:2017-01-07 01:43:57
【问题描述】:

我目前正在尝试读取我的列页脚以确保聚合的总和正好是 100。但是我找不到从网格函数中获取该值的方法。也许我错过了文档中的一个功能。有没有办法做到这一点,还是我必须手动循环遍历我的网格并对值求和?

【问题讨论】:

    标签: angularjs angular-ui-grid


    【解决方案1】:

    您可以在列页脚上使用聚合来自动显示列中所有值的总和。

    你可以有你的网格配置如下

    $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%', footerCellTemplate: '<div class="ui-grid-cell-contents" style="background-color: Red;color: White">custom template</div>' },
            { name: 'registered', field: 'registered', width: '20%', cellFilter: 'date', footerCellFilter: 'date', aggregationType: uiGridConstants.aggregationTypes.max }
        ],
        data: data,
        onRegisterApi: function(gridApi) {
                $scope.gridApi = gridApi;
        }
    };
    

    http://plnkr.co/edit/nv1eJAIyD5xNDn8XI6L9?p=preview

    要从页脚获取值,前提是您知道列索引并具有对 gridApi 的引用。

    $scope.getFooterValue = function()
    {
      console.log($scope.gridApi);
      alert($scope.gridApi.grid.columns[2].getAggregationValue());
    }
    

    【讨论】:

    • 我已经在这样做了。然后我想做的是获取该聚合的值并在我的 javascript 中的其他地方使用它。
    • 更新了 plnkr。您需要使用对 gridApi 的引用。
    猜你喜欢
    • 1970-01-01
    • 2015-07-30
    • 1970-01-01
    • 2012-12-24
    • 2020-02-01
    • 1970-01-01
    • 2015-03-11
    • 2015-11-13
    • 2010-09-05
    相关资源
    最近更新 更多