Question

我遇到了Kendo Grid聚合功能的问题，我似乎无法解决。

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

这已经在这个小提琴中得到了证明：

$(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，如果这有任何不同。

提前谢谢。

Answer 1

我对这种情况的成就。我写了一个汇总：

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

列的FooterTemplate：

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

for field2，field3等：

{
 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`的值之后进行了绑定。所以我在第一列添加了一个函数，它评估所有当前值并正确设置它。

Answer 2

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

 $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 3

将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"
            }]

Kendo Grid Aggregate仅适用于当前页面

3 个答案: