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

Nup*_*pur 0 telerik kendo-ui kendo-grid kendo-dataviz

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

请让我知道如何实现它

谢谢,努普尔

Ama*_*Dev 8

请在这里找到小提琴,希望它有助于解决您的问题.您可以在此处阅读文档.

<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>
Run Code Online (Sandbox Code Playgroud)

[ UPDATE ]要仅导出已过滤的行,请使用以下代码.参考小提琴的工作示例

 <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>
Run Code Online (Sandbox Code Playgroud)