（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。

这部分大家根据项目需要自己发挥吧！

（以上代码仅供参考）

欢迎大家指点交流，内容会随着项目遇到的问题逐渐丰富。