Kendo网格聚合仅适用于当前页面

Kendo Grid Aggregate for current page only

本文关键字：适用于 当前页 网格 Kendo      更新时间：2024-02-19

Kendo Grid聚合函数出现问题，我似乎无法解决。

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

这已经发挥了作用，正如在这个小提琴：

http://jsfiddle.net/0Ly94e49/

$(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#",
    }]
});
});

问题是，就像小提琴一样，总和是所有页面上所有行的总和。我想要的只是当前页面上的行的总和。

有什么想法可以改变小提琴来做到这一点吗？

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

提前谢谢。

我在这种情况下取得的成就。我写了一个聚合：

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`的值之后进行的。所以我在第一列中添加了一个函数，用于计算所有当前值并正确设置它。

最后，我计算的是当前页面的总和，如下所示：

 $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 # "

将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"
            }]
相关文章：