在制作報(bào)表時(shí)常會(huì)遇到的需求是報(bào)表的導(dǎo)出。將報(bào)表導(dǎo)出為一個(gè)Excel格式更便于瀏覽、維護(hù)及打印。同時(shí)Grid也提供了此功能
var grid = $("#grid").data("kendoGrid");
grid.saveAsExcel();
只需要這樣兩行簡(jiǎn)單的代碼就能將grid中的數(shù)據(jù)導(dǎo)出
** 但是... **
有時(shí)候?qū)С龅臄?shù)據(jù)和我們想象的不太一樣！！埠褪！
- 導(dǎo)出失敗浓利，點(diǎn)擊觸發(fā)導(dǎo)出操作的按鈕時(shí)無(wú)反應(yīng)，此時(shí)打開(kāi)瀏覽器控制臺(tái)發(fā)現(xiàn)報(bào)錯(cuò)：
可以看出grid導(dǎo)出使用了jsZip庫(kù)钞速，我們需要將這個(gè)庫(kù)導(dǎo)入;
提供一個(gè)在線可用的js庫(kù)：
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.js"></script>
- 導(dǎo)出的表格名稱默認(rèn)為grid.xlsx贷掖，每次都需要修改好麻煩，我們需要的是當(dāng)前打開(kāi)的表格的名稱xxx.xlsx
此時(shí)只需要我們給grid添加一個(gè)屬性即可：
方法1：
excelExport: function(e) {
e.workbook.fileName = "xxx.xlsx";
}
方法2：
excel: {
fileName: "xxx.xlsx"
},
- 導(dǎo)出成功渴语，看一下導(dǎo)出的Excel,艾瑪!,表中的數(shù)據(jù)怎么和我想象的不太一樣苹威，有的grid中的列，我在對(duì)應(yīng)的列中配置了template函數(shù)驾凶，修改了頁(yè)面上顯示的數(shù)據(jù)牙甫，即grid._data中的數(shù)據(jù)和顯示在頁(yè)面上的數(shù)據(jù)不一致，此時(shí)在Excel中表現(xiàn)的是grid._data中的值调违，而我的需求是要打印出頁(yè)面上顯示的數(shù)據(jù)（這符合大部分需求窟哺，因?yàn)楸４嬖跀?shù)據(jù)庫(kù)中的值，出于對(duì)可維護(hù)性技肩，降低數(shù)據(jù)庫(kù)冗余等問(wèn)題考慮且轨，往往和需要顯示的值是不同的），那么此時(shí)我們就要對(duì)grid._data進(jìn)行處理了虚婿，通過(guò)一系列邏輯判斷來(lái)改變修改里面的值旋奢，從而得到打印的效果
方法1：
//在每次調(diào)用saveAsGrid前會(huì)先執(zhí)行這里面的函數(shù)
excelExport: function(e) {
console.log(e.data);//打印e.data發(fā)現(xiàn)這里面的數(shù)據(jù)就是最后在Excel中輸出的值
/*
* 處理e.data即可
* 將對(duì)數(shù)據(jù)的處理邏輯放在這里！Ｈ蝗Ｖ晾省！＞缃ＫぁＶ蟆！Ｔ列Ｕ嬷佟！３跖臁秸应！
*/
}
方法2：
//在調(diào)用saveAsExcel()前對(duì)grid._data進(jìn)行處理
var grid = $("#grid").data("kendoGrid");
console.log(grid._data);//打印grid._data發(fā)現(xiàn)這里面的數(shù)據(jù)就是打印出來(lái)的數(shù)據(jù)；
/*
*因?yàn)間rid中顯示的數(shù)據(jù)也是grid._data,所以直接修改grid._data會(huì)導(dǎo)致顯示的數(shù)據(jù)也發(fā)生變化
*所以需要先將grid復(fù)制一份
*/
var excel={};
$.extend(excel,grid);//此時(shí)excel就是grid的副本碑宴，擁有和grid一樣的屬性和函數(shù),對(duì)grid的操作可以轉(zhuǎn)移到excel上來(lái)進(jìn)行
$.each(excel._data,function (i,item) {//逐行處理數(shù)據(jù)
//將對(duì)數(shù)據(jù)的處理邏輯放在這里Ｈ硖洹！Ｑ幽；雠病！Ｕ昙洹；咛酢！Ｔ鋈取Ｕ浴！＞稹公黑！
})
excel.saveAsExcel();
- 做完以后，發(fā)現(xiàn)有需求變了摄咆，要求導(dǎo)出grid中所有的數(shù)據(jù)到Excel中凡蚜，打開(kāi)自己導(dǎo)出的Excel發(fā)現(xiàn)現(xiàn)在導(dǎo)出的是grid做完分頁(yè)以后的數(shù)據(jù)，此時(shí)需要對(duì)grid的屬性進(jìn)行修改
excel:{
allPages:true//是否導(dǎo)出所有頁(yè)中的數(shù)據(jù)
},
導(dǎo)出所有數(shù)據(jù)需要處理列數(shù)據(jù)吭从，方法如下：
transport: {
read: function (options) {
remoting.json({
url: url,
type: 'get'
}, function (error, result) {
if (!error) {
// 將對(duì)數(shù)據(jù)的處理邏輯放在這里７！Ｓ靶狻Ｇ畚瘛！Ｑ纪ⅰＴ姹А！Ａ敬病＜丫А！Ｋ显亍轿秧！
options.success(result);
} else {
options.error(error);
}
});
}
}
kendo官方文檔并沒(méi)有直接給出關(guān)于導(dǎo)出Excel功能對(duì)瀏覽器的支持情況中跌，但是為了保險(xiǎn)起見(jiàn)，請(qǐng)盡量使用IE10+以及Firefox4+以及其他現(xiàn)代瀏覽器
轉(zhuǎn)載鏈接：http://www.reibang.com/p/fbcaa51d9c0c
來(lái)源：簡(jiǎn)書(shū)
著作權(quán)歸作者所有菇篡。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)漩符，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
