（4）kendo UI使用基礎介紹與問題整理——Grid問題/導出excel

一、簡要和demo

Grid自帶導出Excel的功能，先上一個官網的demo：

鏈接：https://demos.telerik.com/kendo-ui/grid/excel-export

 

簡略代碼如下：

toolbar: ["excel"],
excel: {
         fileName: "Kendo UI Grid Export.xlsx",
         proxyURL: "https://demos.telerik.com/kendo-ui/service/export",
          filterable: true
},

上面代碼實際的位置是加到生成gird那段代碼的參數里，大家應該能理解。

二、實際項目問題

   從上面的demo可以看出，官網的demo是把導出按鈕放到了toolbar里，自帶了導出的功能。

   實際的項目中可能需要一個單獨的導出按鈕，然后自己添加導出方法。

 1、 下面是導出excel的方法：

var grid = $("#grid").data("kendoGrid");
grid.saveAsExcel();

 

2、帶分頁的grid導出全部數據

如果grid帶有分頁，這時要是需要導出excel的時候導出全部數據，那么需要在grid里添加參數excel，屬性allPages設置為true。

   代碼如下：

excel:{
    allPages:true//是否導出所有頁中的數據
},

 

3、導出文件名稱

為導出的Grid自定義文件名稱的方法如下：

//方法1：
excelExport: function(e) {
        e.workbook.fileName = "xxx.xlsx";
},

//方法2：
excel: {
        fileName: "xxx.xlsx"
    },

 

4、Column template導出問題（自定義列導出顯示問題）

Grid的列是允許使用template，從而實現自定義列的顯示內容和顯示效果的，但是Grid 的saveAsExcel方法保存出來的excel表格，自身並不可以把template指定的內容保存下來（目前我使用的版本會有這樣的問題）。

也在網上找過一些解決辦法，不過到最后還是自己瞎研究了一點兒結果，也許是我理解能力比較差。

下面上我寫的簡略代碼：

excelExport: function (e) {
        $.each(e.data, function (i, item) {//逐行處理數據
                     var value=item.Code;
                     e.workbook.sheets[0].rows[i + 1].cells[1].value = value;
       }); 
},

通過測試，我發現 e.workbook.sheets[0].rows 這里的數據才是導出excel的實際數據，所以無論如何修改e.data，都無法改變打印出來的效果。

e.workbook.sheets[0].rows[0] 這是打印出來的title那一行，所以我再循環的時候是從i+1開始，e.workbook.sheets[0].rows[i + 1].cells這個是列，可以根據需要來修改指定的列，

e.workbook.sheets[0].rows[i + 1].cells[1].value 這里的value是實際顯示的值。

如果在項目中有什么其他相關的需求，建議通過在瀏覽器控制台中輸出數據的方法（console.log()）來進行適當的修改。

 

5、Grid單行導出數據

項目里要求有gird單行導出數據的功能，開始以為grid自帶此功能，不過目前我使用的版本里沒有找到此功能，沒辦法，自己寫吧。

下面上代碼：

//導出一行kendo grid數據
function SaveGridExcel(id, fileName) {

    if (!fileName) {
        fileName = "export";
    }

    var grid = $("#grid").data("kendoGrid");
    var kendoData = grid.dataSource.data();
    var lineIndex;
    for (var i = 0; i < kendoData.length; i++) {
        if (kendoData[i].Id == id) {
            lineIndex = i;
            break;
        }
    }


    var arr = [];
    var isHide = false;
    if (grid.items().length != 0) { //判斷列表中是否存在有效數據
        var rows = []; //excel中的所有的行
        var headCells = []; //獲取grid列表中的標題列
        var cellWidths = []; //設置每列的寬度
        for (var k = 0; k < grid.columns.length; k++) {
            cellWidths.push({ autoWidth: true });
            var cellValue = grid.columns[k];
            if (cellValue.title == null  || cellValue.hidden) {
                arr.push(k);
            }
            else {
                headCells.push({ value: cellValue.title });
            }
        }
        var headRow = { cells: headCells }; //標題行
        rows.push(headRow); //將標題行添加到rows集合中                            
        var cRows = grid.items(); //獲取當前列表內容的行數   
        var rowItem = cRows[lineIndex]; //獲取列表的當前行                            
        var data = grid.dataItem(rowItem); //獲取列表的當前行的數據源                            
        var currentRow = []; //創建當前行的數組變量                            
        for (var j = 0; j < rowItem.cells.length; j++) {
            isHide = false;
            for (var h = 0; h < arr.length; h++) {
                if (arr[h] == j) {
                    isHide = true;
                    break;
                }
            }
            if (!isHide) {
                currentCell = rowItem.cells[j].innerText;
                if (currentCell != null) {
                    currentRow.push({ value: currentCell });
                }
            }
        }
        rows.push({ cells: currentRow }); //添加行元素                           
        //創建工作冊                            
        var workbook = new kendo.ooxml.Workbook({
            sheets: [{
                columns: cellWidths,
                rows: rows
            }]
        });
        //保存為excel文件                            
        kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: fileName + '.xlsx' });
    } else {
        kendo.alert("無有效數據需要導出！");
        return;
    }
}

 

嚴格的說上面的代碼不是我創造出來的，這是肯定的，主要部分還是使用了kendo UI得自制excel的方法，官網上是能夠找到這部分的參考代碼的（kendo.ooxml.Workbook，應該是這個名字吧）。

關鍵的就是這部分代碼：

        //創建工作冊                            
        var workbook = new kendo.ooxml.Workbook({
            sheets: [{
                columns: cellWidths,
                rows: rows
            }]
        });
        //保存為excel文件                            
        kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: fileName + '.xlsx' });

 

只是由於項目的需要，我自己寫了獲取grid中一行數據的邏輯部分而已，用來得到columns和rows。

這部分大家根據項目需要自己發揮吧！

（以上代碼僅供參考）

歡迎大家指點交流，內容會隨着項目遇到的問題逐漸豐富。