Kendo 仅当前页面的网格聚合

Question

我遇到了 Kendo 网格聚合函数的问题，我似乎无法解决。

我有许多包含数字值的行。在网格的底部，我想显示行的总和。

这已经像 fiddle 中所演示的那样工作了：

$(document).ready(function () {
$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Products"
        },
        pageSize: 7,

        aggregate: [{
            field: "ProductName",
            aggregate: "count"
        }, {
            field: "UnitPrice",
            aggregate: "sum"
        }, {
            field: "UnitsOnOrder",
            aggregate: "sum"
        }, {
            field: "UnitsInStock",
            aggregate: "min"
        }, {
            field: "UnitsInStock",
            aggregate: "max"
        }]
    },
    sortable: true,
    scrollable: false,
    pageable: true,
    columns: [{
        field: "ProductName",
        title: "Product Name",
        footerTemplate: "Total Count: #=count#",
    }, {
        field: "UnitPrice",
        title: "Unit Price"
    }, {
        field: "UnitsOnOrder",
        title: "Units On Order",
        footerTemplate: "Sum: #=sum#",
    }]
});
});

问题在于，与 fiddle 中一样，总和适用于所有页面上的所有行。我想要的只是当前页面上的行的总和。

有什么想法可以更改 fiddle 来做到这一点吗？

项目在 Angular，如果这有什么不同的话。

提前致谢。

Answer 1

最后我做的是这样计算当前页面总和：

 $scope.getCurrentPageSums = function () {
           var pageNumber = $scope.grid.dataSource.page();
           var pageSize = $scope.grid.dataSource.pageSize();
           var first = pageSize * (pageNumber - 1);
           var last = first + pageSize - 1;
           var resAmount = 0;
           var resDistance = 0;
           for (var i = first; i <= last; i++) {
               if (allReports[i] != undefined) {
                   resAmount += allReports[i].AmountToReimburse;
                   resDistance += allReports[i].Distance;
               }

           }
           $scope.currentPageAmountSum = resAmount;
           $scope.currentPageDistanceSum = resDistance;

 }

我将从服务器返回的行分配给数据源的架构部分中的 allReports

Schema {
       Data: function(data){
             allReports = data;
       }
}

然后我在数据源的数据绑定部分调用 getCurrentPageSums

dataBound: function () {
           $scope.getCurrentPageSums();
}

最后我绑定到相关字段的footerTemplate中currentPageSum的值

field: "Distance",
title: "Afstand",
footerTemplate: "Side: {{currentPageDistanceSum}}, total: #= sum # "

Answer 2

将 serverPaging 设置为 true。

 pageSize: 7,
 serverPaging : true,
 aggregate: [{
                field: "ProductName",
                aggregate: "count"
            }, {
                field: "UnitPrice",
                aggregate: "sum"
            }, {
                field: "UnitsOnOrder",
                aggregate: "sum"
            }, {
                field: "UnitsInStock",
                aggregate: "min"
            }, {
                field: "UnitsInStock",
                aggregate: "max"
            }]

Answer 3

我对这种情况的成就。我写了一个聚合：

dataSource: {
                        data: dataOfTable,
                        aggregate: [
                            {field: "field1", aggregate: "sum"},
                            {field: "field2", aggregate: "sum"},
                            {field: "field3", aggregate: "sum"}
                        ],
                        pageSize: 20
                    },

列的页脚模板：

    {
 field: "field1",
 title: 'Field1',
 footerTemplate: "#=getCurrentField1()#"    
 }

对于字段 2、字段 3 等：

{
 field: "field2",
 title: 'Field2',
 footerTemplate: "#=currentField2#"    
 }

和函数 getCurrentField1:

//  aggregates data on current page
            var currentField1 = 0;
            var currentField2 = 0;
            var currentField3 = 0;

            function getCurrentField1() {

                var displayedData = $("#grid").data().kendoGrid.dataSource.view()

                var resField1 = 0;
                var resField2 = 0;
                var resField3 = 0;

                for (var i = 0; i <= displayedData.length; i++) {
                    if (displayedData[i] != undefined) {
                        resField1 += displayedData[i].field1;
                        resField2 += displayedData[i].field2;
                        resField3 += displayedData[i].field3;
                    }
                }

                currentField1 = resField1;
                currentField2 = resField2;
                currentField3 = resField3;
                return currentPayAmount;
            }

dataBound 分页无法正常工作。 footerTemplates 中的当前数据不正确，因为绑定是在设置 footerTemplates 的值之后进行的。所以我在第一列中添加了一个函数，用于评估所有当前值并正确设置它。

Kendo 仅当前页面的网格聚合

Kendo Grid Aggregate for current page only

javascript

kendo-ui

angularjs

kendo-grid