（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。
这部分大家根据项目需要自己发挥吧！
（以上代码仅供参考）
欢迎大家指点交流，内容会随着项目遇到的问题逐渐丰富。
