Question

我收到错误＆＃34;未捕获的ReferenceError：未定义计数＆＃34;当聚合列与KendoTreeList一起使用并尝试导出到excel时。我得到sum和max aggregate的相同错误。

<div id="treelist"></div>

    <script>
        $(document).ready(function() {
            var service = "//demos.telerik.com/kendo-ui/service";

            $("#treelist").kendoTreeList({
                toolbar: [ "excel" ],
                excel: {
                    fileName: "Kendo UI TreeList Export.xlsx",
                    proxyURL: "//demos.telerik.com/kendo-ui/service/export",
                    filterable: true
                },
                dataSource: {
                    transport: {
                        read: {
                            url: service + "/EmployeeDirectory/All",
                            dataType: "jsonp"
                        }
                    },
                    schema: {
                        model: {
                            id: "EmployeeId",
                            parentId: "ReportsTo",
                            fields: {
                                ReportsTo: { nullable: true },
                                EmployeeId: {  type: "number" },
                                HireDate: { field: "HireDate", type: "date" }
                            }
                        }
                    },
                    aggregate: [
                        { field: "FirstName", aggregate: "count" },
                        { field: "HireDate", aggregate: "max" }
                    ]
                },
                height: 540,
                filterable: true,
                sortable: true,
                columns: [
                    { field: "FirstName", title: "Name",
                      template: "#: FirstName # #: LastName #",
                      footerTemplate: "#= count # employee(s)" },
                    { field: "Position" },
                    { field: "HireDate", title: "Hire Date", format: "{0:MMMM d, yyyy}",
                      footerTemplate: "Last employee hired on #= kendo.format('{0:MMMM d, yyyy}', max) #" }
                ]
            });
        });
    </script>

我也尝试使用此演示代码Kendo UI Dojo，但没有成功。

有人有同样的问题吗？

Answer 1

您遇到的问题是由于范围的变化引起的。

创建网格时，#= count #实际上是指#= data.FirstName.count #。现在在网格创建中，data被解释为单个数据行，因此定义了data.Firstname.Count。但是，在ExportToExcel data上不是一行数据，它是网格中所有数据元素的数组。

因此#= data.FirstName.count #不起作用。

有两种方法可以解决此问题。您可以执行的第一种（也是最好的方法）是重写模型以使用组，而不是已实现的父/子关系。如果执行此操作，则可以使用#=data.aggregates.FirstName.count#访问两个事件中的组聚合。

第二，您可以使用自定义聚合函数，并且只能在导出时使用。像这样：

footerTemplate: (data: any) => {
    var rVal = 0
    if (data.count) { // If count is defined, this is just a data row so just use count. 
        rval = data.count;
    } else {  // Otherwise use the custom function.
        data.forEach((item: any, index: any) => { // For each item, if it has a count, count it.  
            rVal = (item.FirstName) ? (rVal + item.FirstName.Count) : rVal;
        });
    }                       
    return `${rVal} employee(s)`; \\ The final sum is the grand total. 
}

自定义聚合在dojo示例中不起作用，因为Telerik并未正式支持它们，但是我能够使其在本地运行。这行得通，但是我真的推荐第一种选择。

请注意，如果您忘记了data所指的内容，则可以使用#=console.log(data)#查看每个上下文/事件的外观。

Answer 2

嗯...不知何故，当您导出到 Excel 时，Kendo 不会向 count 提供 max 和 footerTemplate。因此，当 count 和 max 未定义时，我们必须提供它们。在 Telerik DOJO 中尝试以下代码。解决方法是将 TreeList 对象分配给引用，以便我们可以获得 dataSource。

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/treelist/aggregates">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
</head>
<body>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
<div id="example">
        <div id="treelist"></div>

        <script>
            $(document).ready(function() {
                var service = "//demos.telerik.com/kendo-ui/service";

                var treeList = $("#treelist").kendoTreeList({
                    toolbar: [ "excel" ],
                    excel: {
                        fileName: "Kendo UI TreeList Export.xlsx",
                    },
                    dataSource: {
                        transport: {
                            read: {
                                url: service + "/EmployeeDirectory/All",
                                dataType: "jsonp"
                            }
                        },
                        schema: {
                            model: {
                                id: "EmployeeId",
                                parentId: "ReportsTo",
                                fields: {
                                    ReportsTo: { nullable: true },
                                    EmployeeId: {  type: "number" },
                                    HireDate: { field: "HireDate", type: "date" }
                                }
                            }
                        },
                        aggregate: [
                            { field: "FirstName", aggregate: "count" },
                            { field: "HireDate", aggregate: "max" }
                        ]
                    },
                    height: 540,
                    filterable: true,
                    sortable: true,
                    columns: [
                        { 
                          field: "FirstName", 
                          title: "Name",
                          template: "#: FirstName # #: LastName #",
                          footerTemplate: function(dataItem) {
                            if (dataItem.count) {
                              return dataItem.count + ' employee(s)';
                            } else {
                              var ds = treeList.dataSource;
                              return ds._aggregateResult.null.FirstName.count + ' employee(s)';
                            }
                          },
                        },
                        { 
                          field: "Position" 
                        },
                        { 
                          field: "HireDate", 
                          title: "Hire Date", 
                          format: "{0:MMMM d, yyyy}",
                          footerTemplate: function(dataItem) {
                            if (dataItem.max) {
                                return 'Last employee hired on ' + kendo.format('{0:MMMM d, yyyy}', dataItem.max);
                            } else {
                              var ds = treeList.dataSource;
                              return 'Last employee hired on ' + kendo.format('{0:MMMM d, yyyy}', 
                                ds._aggregateResult.null.HireDate.max);
                            }
                          },
                        }
                    ]
                }).data('kendoTreeList');
            });
        </script>
    </div>


</body>
</html>

Kendo UI kendoTreeList ExportToExcel：＆＃34; Uncaught ReferenceError：count未定义＆＃34;，带有聚合列

2 个答案: