Question

我有一个我明确定义的剑道网格。我通过data-toolbar='["excel"]'

启用了Excel导出工具栏

问题是这只会导出没有定义模板的字段。（下面网格中的前3个：Checkpoint，Location，Patrolled By），其他列显示在excel文档中，但这些列的单元格都是空的。

如何获取excel导出中显示的值？我猜测它需要在excel导出之前进行某种预处理，因为excel导出功能并不能解释我的自定义字段html模板。

<div id="Checkpoints">
    <div 
        ...
        data-toolbar='["excel"]'
        data-excel='{ "fileName": "CheckpointExceptionExport.xlsx", "allPages": "true" }'
        ...
        data-columns='[
            {
                "field": "checkpoint_name", 
                "title": "Checkpoint", 
                "filterable": { "cell": { "operator": "contains"}}},
            {
                "field": "location_name", 
                "title": "Location", 
                "filterable": { "cell": { "operator": "contains"}}
            },
            {
                "field": "patrolled_by", 
                "title": "Patrolled By", 
                "filterable": { "cell": { "operator": "contains"}}
            },
            {
                "field": "geotag",
                "title": "GeoTag", 
                "template": kendo.template($("#geotagTemplate").html()) 
            },
            {
                "field": "geofence",
                "title": "GeoFence",   
                "template": kendo.template($("#geofenceTemplate").html())
            },
            {
                "field": "completed",
                "title": "Completed",
                "template": kendo.template($("#completedTemplate").html())
            },
            {
                "field": "gps",
                "title": "GPS", 
                "template": kendo.template($("#gpsTemplate").html())
            }
        ]'>
    </div>
</div>

我已经遇到过处理excel导出事件的代码片段但是我没有看到以我定义网格的方式使用此事件处理程序的方法。

 <script>
      $("#grid").kendoGrid({
        excelExport: function(e) {
          ...
        },

      });
    </script>

Answer 1

检查http://docs.telerik.com/kendo-ui/controls/data-management/grid/excel-export#limitations，这解释了为什么会发生这种情况并说明如何继续。

网格在Excel导出期间不使用列模板 - 它仅导出数据。此行为的原因是列模板可能包含无法转换为Excel列值的任意HTML。有关如何使用不包含HTML的列模板的详细信息，请参阅此column template example。

<强>更新

为了在使用声明性窗口小部件初始化时附加Kendo UI事件处理程序，请使用data-bind HTML属性和event binding：

<div
    data-role="grid"
    data-bind="events: { excelExport: yourExcelExportHandler }">
</div>

查看Kendo UI Grid MVVM demo以获取类似示例。

yourExcelExportHandler应该是viewModel中定义的函数，类似于上例中的onSave。

excelExport事件也可附加after widget initialization。

Answer 2

我在 Telerik 的网站上找到了这个很棒的答案：https://docs.telerik.com/kendo-ui/knowledge-base/grid-export-arbitrary-column-templates。他们的辅助函数使用精确的模板文本导出到 excel。

<div id="grid"></div>
    <script>
      $(document).ready(function() {
        $("#grid").kendoGrid({
          dataSource: {
            type: "odata",
            transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            },
            schema: {
              model : {
                fields: {
                  OrderDate: {type: "date"}
                }
              }
            },
            pageSize: 20,
            serverPaging: true
          },
          height: 550,
          toolbar: ["excel"],
          excel: {
            allPages: true
          },
          excelExport: exportGridWithTemplatesContent,
          pageable: true,
          columns: [
            {
              field: "Freight",
              hidden: true
            },
            {
              field:"OrderID",
              filterable: false
            },
            {
              field: "OrderDate",
              title: "Order Date",
              template: "<em>#:kendo.toString(OrderDate, 'd')#</em>"
            }, {
              field: "ShipName",
              title: "Ship Name",
              template: "#:ShipName.toUpperCase()#"
            }, {
              field: "ShipCity",
              title: "Ship City",
              template: "<span style='color: green'>#:ShipCity#, #:ShipCountry#</span>"
            }
          ],
          columnMenu: true
        });
      });

      function exportGridWithTemplatesContent(e){
        var data = e.data;
        var gridColumns = e.sender.columns;
        var sheet = e.workbook.sheets[0];
        var visibleGridColumns = [];
        var columnTemplates = [];
        var dataItem;
        // Create element to generate templates in.
        var elem = document.createElement('div');

        // Get a list of visible columns
        for (var i = 0; i < gridColumns.length; i++) {
          if (!gridColumns[i].hidden) {
            visibleGridColumns.push(gridColumns[i]);
          }
        }

        // Create a collection of the column templates, together with the current column index
        for (var i = 0; i < visibleGridColumns.length; i++) {
          if (visibleGridColumns[i].template) {
            columnTemplates.push({ cellIndex: i, template: kendo.template(visibleGridColumns[i].template) });
          }
        }

        // Traverse all exported rows.
        for (var i = 1; i < sheet.rows.length; i++) {
          var row = sheet.rows[i];
          // Traverse the column templates and apply them for each row at the stored column position.

          // Get the data item corresponding to the current row.
          var dataItem = data[i - 1];
          for (var j = 0; j < columnTemplates.length; j++) {
            var columnTemplate = columnTemplates[j];
            // Generate the template content for the current cell.
            elem.innerHTML = columnTemplate.template(dataItem);
            if (row.cells[columnTemplate.cellIndex] != undefined)
              // Output the text content of the templated cell into the exported cell.
              row.cells[columnTemplate.cellIndex].value = elem.textContent || elem.innerText || "";
          }
        }
      }
    </script>

Kendo excel导出 - 如何使用自定义模板导出列？

2 个答案: