劍道UI多個網格Excel導出

這裏是我使用的劍道多個網格導出到Excel中的代碼，我怎麼能與劍道UI多個網格Excel導出

2014-12-25 Vincent

請與下面的代碼片段嘗試所有頁面導出。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Kendo UI Snippet</title> 

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css"> 
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css"> 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/jszip.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script> 
    <style> 
    #products .k-grid-toolbar 
    { 
     display:none !important; 
    } 
    </style>  
</head> 
<body> 

<button id="export" class="k-button"><span class="k-icon k-i-excel"></span>Export to Excel</button> 
<div id="products"></div> 
<div id="orders"></div> 
<script> 
    // used to sync the exports 
    var promises = [ 
    $.Deferred(), 
    $.Deferred() 
    ]; 

    $("#export").click(function(e){ 
    // trigger export of the products grid 
    $("#products").data("kendoGrid").saveAsExcel(); 
    // trigger export of the orders grid 
    $("#orders").data("kendoGrid").saveAsExcel(); 
    // wait for both exports to finish 
    $.when.apply(null, promises) 
    .then(function(productsWorkbook, ordersWorkbook) { 

     // create a new workbook using the sheets of the products and orders workbooks 
     var sheets = [ 
     productsWorkbook.sheets[0], 
     ordersWorkbook.sheets[0] 
     ]; 

     sheets[0].title = "Products"; 
     sheets[1].title = "Orders"; 

     var workbook = new kendo.ooxml.Workbook({ 
     sheets: sheets 
     }); 

     // save the new workbook,b 
     kendo.saveAs({ 
     dataURI: workbook.toDataURL(), 
     fileName: "ProductsAndOrders.xlsx" 
     }) 
    }); 
    }); 

    $("#products").kendoGrid({ 
    toolbar: ["excel"], 
      excel: { 
       allPages: true 
    }, 
    dataSource: { 
     transport: { 
     read: { 
      url: "http://demos.telerik.com/kendo-ui/service/Products", 
      dataType: "jsonp" 
     } 
     }, 
     pageSize: 20 
    }, 
    height: 550, 
    pageable: true, 
    excelExport: function(e) { 
     e.preventDefault(); 

     promises[0].resolve(e.workbook); 
    } 
    }); 

    $("#orders").kendoGrid({ 
    dataSource: { 
     type: "odata", 
     transport: { 
     read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" 
     }, 
     pageSize: 20, 
     serverPaging: true 
    }, 
    height: 550, 
    pageable: true, 
    columns: [ 
     { field:"OrderID" }, 
     { field: "ShipName", title: "Ship Name" }, 
     { field: "ShipCity", title: "Ship City" } 
    ], 
    excelExport: function(e) { 
     e.preventDefault(); 

     promises[1].resolve(e.workbook); 
    } 
    }); 
</script> 
</body> 
</html>

讓我知道是否有任何問題。

來源

2014-12-25 07:45:11

它的工作原理，謝謝。但是，如果我編輯我的網格然後更新，它只是導出舊數據不是新的。 – Vincent

你能否提供你的代碼片段？ –

這是我的代碼，謝謝你的幫助。 [鏈接]（http://stackoverflow.com/questions/27663647/how-to-export-kendo-multiple-grid-after-grid-refresh-display-new-datas） – Vincent

劍道UI多個網格Excel導出

回答

相關問題