kendoui固定宽度_Kendoui之grid保存为Excel

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库：

导出的表格名称默认为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+以及其他现代浏览器