Question

我使用kendo网格插件来显示数据。使用内置功能导出优于kendo网格，导出网格数据。 http://demos.telerik.com/kendo-ui/grid/excel-export 但是我想在将数据导出到excel之前删除2列。

请让我知道如何实现它

谢谢， Nupur

Answer 1

请在此处找到fiddle，希望它有助于解决您的问题。您可以阅读文档here。

<div id="grid" style="width: 900px"></div>
<script>
    $("#grid").kendoGrid({
        toolbar: ["Export"],
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
            },
            schema:{
                model: {
                    fields: {
                        UnitsInStock: { type: "number" },
                        ProductName: { type: "string" },
                        UnitPrice: { type: "number" },
                        UnitsOnOrder: { type: "number" },
                        UnitsInStock: { type: "number" }
                    }
                }
            },
            pageSize: 7,
            group: {
                field: "UnitsInStock", aggregates: [
                    { field: "ProductName", aggregate: "count" },
                    { field: "UnitPrice", aggregate: "sum"},
                    { field: "UnitsOnOrder", aggregate: "average" },
                    { field: "UnitsInStock", aggregate: "count" }
                ]
            },
            aggregate: [
                { field: "ProductName", aggregate: "count" },
                { field: "UnitPrice", aggregate: "sum" },
                { field: "UnitsOnOrder", aggregate: "average" },
                { field: "UnitsInStock", aggregate: "min" },
                { field: "UnitsInStock", aggregate: "max" }
            ]
        },
        sortable: true,
        pageable: true,
        groupable: true,
        filterable: true,
        columnMenu: true,
        reorderable: true,
        resizable: true,
        columns: [
            { width: 300, locked: true, field: "ProductName", title: "Product Name", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
            { width: 300, field: "UnitPrice", title: "Unit Price", aggregates: ["sum"] },
            { width: 300, field: "UnitsOnOrder", title: "Units On Order", aggregates: ["average"], footerTemplate: "Average: #=average#",
                groupFooterTemplate: "Average: #=average#" },
            { width: 300, field: "UnitsInStock", title: "Units In Stock", aggregates: ["min", "max", "count"], footerTemplate: "Min: #= min # Max: #= max #",
            groupHeaderTemplate: "Units In Stock: #= value # (Count: #= count#)" }
        ]
    });

   $(".k-grid-Export").on('click', function(e){
    var grid = $("#grid").getKendoGrid();
    var rows = [{
      cells: [
        { value: "ProductName" },
        { value: "UnitPrice" }
      ]
    }];
    var trs = $("#grid").find('tr');
    for (var i = 0; i < trs.length; i++) {

        var dataItem = grid.dataItem(trs[i]);
        rows.push({
          cells: [
            { value: dataItem.ProductName },
            { value: dataItem.UnitPrice }
          ]
        })

    }
    excelExport(rows);
     e.preventDefault();
  });

  function excelExport(rows) {
    var workbook = new kendo.ooxml.Workbook({
      sheets: [
        {
          columns: [
            { autoWidth: true },
            { autoWidth: true }
          ],
          title: "Orders",
          rows: rows
        }
      ]
    });
    kendo.saveAs({dataURI: workbook.toDataURL(), fileName: "Test.xlsx"});

  }

</script>

[<强>更新] 要仅导出已过滤的行，请使用以下代码。请参阅fiddle了解工作示例

 <div id="example">
<div id="grid" style="width: 900px"></div>
<script>
    $("#grid").kendoGrid({
        toolbar: ["Export"],
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
            },
            schema:{
                model: {
                    fields: {
                        UnitsInStock: { type: "number" },
                        ProductName: { type: "string" },
                        UnitPrice: { type: "number" },
                        UnitsOnOrder: { type: "number" },
                        UnitsInStock: { type: "number" }
                    }
                }
            },
            pageSize: 7,
            group: {
                field: "UnitsInStock", aggregates: [
                    { field: "ProductName", aggregate: "count" },
                    { field: "UnitPrice", aggregate: "sum"},
                    { field: "UnitsOnOrder", aggregate: "average" },
                    { field: "UnitsInStock", aggregate: "count" }
                ]
            },
            aggregate: [
                { field: "ProductName", aggregate: "count" },
                { field: "UnitPrice", aggregate: "sum" },
                { field: "UnitsOnOrder", aggregate: "average" },
                { field: "UnitsInStock", aggregate: "min" },
                { field: "UnitsInStock", aggregate: "max" }
            ]
        },
        sortable: true,
        pageable: true,
        groupable: true,
        filterable: true,
        columnMenu: true,
        reorderable: true,
        resizable: true,
        columns: [
            { width: 300, locked: true, field: "ProductName", title: "Product Name", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
            { width: 300, field: "UnitPrice", title: "Unit Price", aggregates: ["sum"] },
            { width: 300, field: "UnitsOnOrder", title: "Units On Order", aggregates: ["average"], footerTemplate: "Average: #=average#",
                groupFooterTemplate: "Average: #=average#" },
            { width: 300, field: "UnitsInStock", title: "Units In Stock", aggregates: ["min", "max", "count"], footerTemplate: "Min: #= min # Max: #= max #",
            groupHeaderTemplate: "Units In Stock: #= value # (Count: #= count#)" }
        ]
    });

   $(".k-grid-Export").on('click', function(e){
    var grid = $("#grid").getKendoGrid();
    var rows = [{
      cells: [
        { value: "ProductName" },
        { value: "UnitPrice" }
      ]
    }];
    //var trs = $("#grid").find('tr');

     var trs = grid.dataSource;

    var filteredDataSource = new kendo.data.DataSource({
        data: trs.data(),
        filter: trs.filter()
    });

    filteredDataSource.read();
    var data = filteredDataSource.view();

    for (var i = 0; i < data.length; i++) {

        var dataItem =  data[i];

        rows.push({
          cells: [
            { value: dataItem.ProductName },
            { value: dataItem.UnitPrice }
          ]
        })

    }
    excelExport(rows);
     e.preventDefault();
  });

  function excelExport(rows) {
    var workbook = new kendo.ooxml.Workbook({
      sheets: [
        {
          columns: [
            { autoWidth: true },
            { autoWidth: true }
          ],
          title: "Orders",
          rows: rows
        }
      ]
    });
    kendo.saveAs({dataURI: workbook.toDataURL(), fileName: "Test.xlsx"});

  }

</script>

Answer 2

您可以尝试网格选项的excelExport事件。

excelExport: function(e) {
    var sheet = e.workbook.sheets[0];
    for (var i = 0; i < sheet.rows.length; i++) {
        sheet.rows[i].cells.reverse();
        for (var ci = 0; ci < sheet.rows[i].cells.length; ci++) {
            sheet.rows[i].cells[ci].hAlign = "right";
        }
    }
},

http://docs.telerik.com/kendo-ui/controls/data-management/grid/excel-export#what-is-exported

导出自定义数据以在kendo Grid中出色

2 个答案: