Kendoui中的Grid组件是一个强大的报表生成组件，可以通过读取dataSource._data来快速生成一个便于浏览的报表，并提供一系列对报表的操作；
API:http://www.kendoui.io/kendo-ui/api/javascript/ui/grid.html
在制作报表时常会遇到的需求是报表的导出。将报表导出为一个Excel格式更便于浏览、维护及打印。同时Grid也提供了此功能
var grid = $("#grid").data("kendoGrid");
grid.saveAsExcel();
只需要这样两行简单的代码就能将grid中的数据导出
** 但是... **
有时候导出的数据和我们想象的不太一样！！！
-
导出失败，点击触发导出操作的按钮时无反应，此时打开浏览器控制台发现报错：
可以看出grid导出使用了jsZip库，我们需要将这个库导入;
提供一个在线可用的js库：
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.js"></script>
- 导出的表格名称默认为grid.xlsx，每次都需要修改好麻烦，我们需要的是当前打开的表格的名称xxx.xlsx
此时只需要我们给grid添加一个属性即可：
方法1：
excelExport: function(e) {
e.workbook.fileName = "xxx.xlsx";
}
方法2：
excel: {
fileName: "xxx.xlsx"
},
- 导出成功，看一下导出的Excel,艾玛!,表中的数据怎么和我想象的不太一样，有的grid中的列，我在对应的列中配置了template函数，修改了页面上显示的数据，即grid._data中的数据和显示在页面上的数据不一致，此时在Excel中表现的是grid._data中的值，而我的需求是要打印出页面上显示的数据（这符合大部分需求，因为保存在数据库中的值，出于对可维护性，降低数据库冗余等问题考虑，往往和需要显示的值是不同的），那么此时我们就要对grid._data进行处理了，通过一系列逻辑判断来改变修改里面的值，从而得到打印的效果
方法1：
//在每次调用saveAsGrid前会先执行这里面的函数
excelExport: function(e) {
console.log(e.data);//打印e.data发现这里面的数据就是最后在Excel中输出的值
/*
* 处理e.data即可
* 将对数据的处理逻辑放在这里！！！！！！！！！！！！！
*/
}
方法2：
//在调用saveAsExcel()前对grid._data进行处理
var grid = $("#grid").data("kendoGrid");
console.log(grid._data);//打印grid._data发现这里面的数据就是打印出来的数据；
/*
*因为grid中显示的数据也是grid._data,所以直接修改grid._data会导致显示的数据也发生变化
*所以需要先将grid复制一份
*/
var excel={};
$.extend(excel,grid);//此时excel就是grid的副本，拥有和grid一样的属性和函数,对grid的操作可以转移到excel上来进行
$.each(excel._data,function (i,item) {//逐行处理数据
//将对数据的处理逻辑放在这里！！！！！！！！！！！！！
})
excel.saveAsExcel();
- 做完以后，发现有需求变了，要求导出grid中所有的数据到Excel中，打开自己导出的Excel发现现在导出的是grid做完分页以后的数据，此时需要对grid的属性进行修改
excel:{
allPages:true//是否导出所有页中的数据
},
以上。
分割线：
一、关于导出grid中行是收缩到一起的问题：由于grid-columns-field在定义宽度的时候存在两种方式：
1.页面自适应形式：width定义为百分数
2.固定长度形式：width定义为数字
使用第一中方法导出Excel时，Excel不能获得具体的宽度，所以默认无宽度，造成的直接结果就是导出的列全部收缩在一起。使用第二种方法导出Excel时，在field中定义的width就是导出的Excel的列的宽度。使用第二种长度定义形式能解决列收缩的问题；
二、关于导出中grid需要导出部分列的解决办法：
1.经过测试grid.saveAsExcel()导出的Excel只包含当前grid显示的列，隐藏的列不会被导出。
2.测试grid的Event中的excelExport事件是发生在saveAsExcel之后
所以可以通过两步可以解决控制grid只导出部分列的问题：
- 在执行grid.saveAsExcel()执行的前一步，将那些不需要导出到Excel的列使用grid.hideColumn()隐藏起来
- 给grid定义excelExport事件，这个事件主要处理的是将那些刚刚被隐藏起来的列使用grid.showColumn()显示出来
浏览器支持情况
kendo官方文档并没有直接给出关于导出Excel功能对浏览器的支持情况，但是为了保险起见，请尽量使用IE10+以及Firefox4+以及其他现代浏览器
网友评论
var excel={};
$.extend(excel,grid);//此时excel就是grid的副本，拥有和grid一样的属性和函数,对grid的操作可以转移到excel上来进行
$.each(excel._data,function (i,dataItem) {//逐行处理数据,转换值对应的含义
dataItem.summaryType = Hap.getCodeMeaning(summaryTypeData,dataItem.summaryType);
dataItem.merchantType =Hap.getCodeMeaning(merchantTypeData,dataItem.merchantType);
dataItem.serviceType =Hap.getCodeMeaning(serviceTypeData,dataItem.serviceType)
})
console.log(excel._data);
excel.saveAsExcel();
$.each(grid._data,function (i,dataItem) {//逐行处理数据,转换值对应的含义
dataItem.summaryType = Hap.getCodeMeaning(summaryTypeData,dataItem.summaryType);
dataItem.merchantType =Hap.getCodeMeaning(merchantTypeData,dataItem.merchantType);
dataItem.serviceType =Hap.getCodeMeaning(serviceTypeData,dataItem.serviceType);
count++;
})
console.log(grid._data);
if(count==grid._data.length) {
grid.saveAsExcel();
}
这样？
$.each(excel._data,function (i,item) {//逐行处理数据
//将对数据的处理逻辑放在这里！！！！！！！！！！！！！
count++;//增加计数器，解决异步问题导致的导出数据和打印数据不一致的问题
}
allPages:true
}
导出的还是单页的数据，是我哪里写错了？
还有 kendo ui里面数据请求 是read:{ } 感觉好别扭，我如果用$.ajax 请求又该怎么做呢？
至于 要传参数，其实dataSource也提供了相关的函数 官方文档-> https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.parameterMap
parameterMap: function (data, type){}函数中包含两个参数，其中data是你选择执行的grid中的数据（这个参数主要是删/改使用的，会得到grid中那些dirty:true的数据），type属性是dataSource要发送的请求的类型，包含一下四个值“read”,"create","update","destroy", type决定了会进入dataSource会进入哪个分支发送请求，另外你也可以通过type来控制你要发送的数据；最后，parameterMap函数需要一个返回值，就是你通过dataSource发送出去的数据（等同与ajax的data）
以上；
谢谢博主。 但是还有一个问题，就是那个 $.ajax请求怎么弄呢? 因为要传参，不知道怎么弄参数。