在分页/分组时,显示Kendo UI Grid中所有项目(也是那些不可见的项目)的聚合

时间:2015-06-02 15:09:38

标签: angularjs kendo-ui kendo-grid odata

使用分页/分组时,是否可以显示网格数据源中所有项的聚合?

我有一个包含描述,类型,成本等列的项目列表。 该列表长达1000多个项目,因此我使用OData一次只查询200个项目。 但是,当我查看“成本”列的聚合时,它仅显示当前显示的项目的总和,如果按“类型”分组,则相同。如果类型中的项目数超过页面大小,则仅对可见项进行求和。

这是我的配置:

$scope.costGridOptions = {
    dataSource: new kendo.data.DataSource({
        type: "odata",
        transport: {
            read: function (options) {
                // This maps from OData v4 query format to v3 format
                var odataParams = ODataFactory.mapParameters(options.data);

                // This calls a service at http://localhost:4567/api/cost?$inlinecount=allpages&$top=200
                CostService.queryCosts(odataParams).then(function (result) {
                    /// Data is returned on the following format:
                    /// {
                    ///     @odata.count: 1845,
                    ///     @odata.nextLink: http://localhost:4567/api/cost?$top=200&skip=200,
                    ///     value: [
                    ///         { Id: 1, Description: "Something", Date: "2015-01-01", Type: "Tools", Cost: 386.5 },
                    ///         { Id: 2, Description: "Something Else", Date: "2015-01-02", Type: "Salaries", Cost: 5698785 },
                    ///         ...
                    ///     ]
                    /// }
                    if (result && result.value) {
                        options.success(result);
                    } else {
                        options.success({});
                    }
                });
            }
        },
        schema: {
            data: function (data) {
                return data.value;
            },
            total: function (data) {
                return data["@odata.count"];
            },
            model: {
                id: "Id",
                fields: {
                    Id: { type: "number", editable: false, nullable: true },
                    Date: { type: "date" },
                    Cost: { type: "number" },
                    Description: { type: "string" },
                    Type: { type: "string" }
                }
            }
        },
        pageSize: 200,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        aggregate: [
            { field: "Cost", aggregate: "sum" }
        ],
        sort: { field: "Date", dir: "desc" }
    }),
    columns: [
        {
            field: "Id",
            title: "Id",
            hidden: true
        },
        {
            field: "Date",
            title: "Date",
            type: "date",
            template: "#= moment(Date).format('LL') #",
            aggregates: ["count"],
            footerTemplate: "TOTAL",
            groupHeaderTemplate: "#= moment(value).format('LL') # | Count: #= count #",
            groupFooterTemplate: "SUBTOTAL"
        },
        {
            field: "Description",
            title: "Description",
            groupable: false,
            template: function (dataItem) {
                return "<small>" + dataItem.Description + "</small>";
            },
        },
        {
            field: "Cost",
            title: "Cost",
            aggregates: ["sum"],
            groupable: false,
            template: function (dataItem) {
                return "<div><span style='display:inline-block;width:25%;text-align:left'>" + numeral.languageData().currency.symbol + "</span><span style='display:inline-block;width:75%;text-align:right;white-space:nowrap;'>" + numeral(dataItem.Cost).format('0,0.00') + "</span></div>";
            },
            groupFooterTemplate: function (data) {
                return "<div><span style='display:inline-block;width:25%;text-align:left'>" + numeral.languageData().currency.symbol + "</span><span style='display:inline-block;width:75%;text-align:right;white-space:nowrap;'>" + numeral(data.Cost.sum).format('0,0.00') + "</span></div>";
            },
            footerTemplate: function (data) {
                return "<div><span style='display:inline-block;width:25%;text-align:left'>" + numeral.languageData().currency.symbol + "</span><span style='display:inline-block;width:75%;text-align:right;white-space:nowrap;'>" + numeral(data.Cost.sum).format('0,0.00') + "</span></div>";
            }
        },
        {
            field: "Type",
            title: "Type",
            aggregates: ["count"]
        }
    ],
    pageable: {
        info: true,
        numeric: false,
        previousNext: true
    },
    groupable: {
        showFooter: true
    },
    scrollable: false,
    sortable: true,
    resizable: true,
    filterable: false
};

1 个答案:

答案 0 :(得分:1)

如果您一次只返回200个项目,则无法计算所有1000多个项目的客户端聚合。 dataSource只知道你当时给它的200个。

您需要在服务器端进行分组计算,并在调用服务时返回这些总计,就像@ odata.count在您获取200个集合时为您提供的项目总数一样。 / p>