开发思路:
- 序列化当前GridPanel 数据, 表头结构(用于对应关系), 通过控制器Aspose写到Excel中, 然后返回临时文件地址, 弹出窗口下载.
function btnExportOut(gpl, isOnlyCurrentPage) { var reportName = '导出文件名前缀'; if (Ext.isEmpty(gpl.xtype)) { gpl = App[gpl]; if (gpl.xtype != 'grid' && gpl.xtype != 'treepanel') { Ext.MessageBox.show({ title: "提示", msg: "导出参数错误。", modal: true, buttons: Ext.Msg.OK, icon: Ext.Msg.INFO }); return; } } if (gpl.xtype == "grid" && gpl.store.data.items.length == 0 && isOnlyCurrentPage == 1) { Ext.MessageBox.show({ title: "提示", msg: "列表没有数据,不能进行导出。", modal: true, buttons: Ext.Msg.OK, icon: Ext.Msg.INFO }); return; } if (gpl.xtype == "treepanel" && gpl.items.length == 0 && isOnlyCurrentPage == 1) { Ext.MessageBox.show({ title: "提示", msg: "列表没有数据,不能进行导出。", modal: true, buttons: Ext.Msg.OK, icon: Ext.Msg.INFO }); return; } Ext.net.Mask.show({ msg: '正在导出数据,请稍候...' }); var datas = getGirdAllData(gpl); Ext.Ajax.request({ url: isOnlyCurrentPage == 1 ? '/当前页' : '/全部页/', params: { queryP: Ext.encode(gpl.store.readParameters().apply), //Grid 的parameter参数数组 jsonData: Ext.encode(datas), //当前页需要把数据传入. 全部页用不到这个数据. _reportName: reportName, _headerStruct: getEncodeGridHeader(gpl) }, method: 'POST', timeout: 600000, success: function (u) { //防止下载出现0kb情况,等待后台下载 setTimeout(function () { Ext.net.Mask.hide(); showExport(u.responseText); }, 3000); }, failure: function (u) { Ext.net.Mask.hide(); Ext.Msg.alert(u.responseText); } }) } var showExport = function (url) { Ext.MessageBox.show({ title: "Excel下载提示", msg: "<a href='" + url + "' style='color: blue;text-decoration: none;font-size:15px;font-weight: bold;'>请点击此处下载到本地</a>", modal: true, buttons: Ext.Msg.CANCEL, icon: Ext.Msg.INFO }); } function getEncodeGridHeader(gpl) { var headers; dataIndex = 0; var headers = getAllHeader(gpl.columns, gpl); headers = Ext.encode(headers); return headers; } //获取所以列并带主键 var getAllHeader = function (gplColumns, gpl) { var data = []; for (var colIndex in gplColumns) { var col = gplColumns[colIndex]; if (col.dataIndex != "Checked") { var colText = col.text == null ? "" : col.text; if (colText != "") { var tmp = { Text: col.text.toLowerCase().replace(/<br\/>/g, "").replace(/<\/br>/g, "").replace(/</g, "").replace(/>/g, ""), Width: getWidth(col), Cols: [] }; var field = gpl.store.getFieldByName(col.dataIndex); if (field) { tmp.DataType = field.type.type; } if (col.items && col.items.length > 0) { tmp.Cols = getAllHeader(col.items.items, gpl); } else if (col.columns && col.columns.length > 0) { tmp.Cols = getAllHeader(col.columns, gpl); } else { tmp.DataIndex = col.dataIndex; tmp.Index = "d" + dataIndex++; //索引 } if (col.hidden) { tmp.Hiden = true; if (colText.toLowerCase() == "id" || colText.toLowerCase() == "mid" || colText.toLowerCase() == "sid") { } else { continue; } } else { tmp.Hiden = false; } tmp.xtype = col.xtype; //列类型 if (col.editor) { tmp.editor = col.editor.xtype; //文本框类型 } else { tmp.editor = ""; } if (col.xtype == 'rownumberer' || col.xtype == 'commandcolumn') { continue; } data.push(tmp); } } } return data; }; //获取宽度 var getWidth = function (col) { if (col.width) { return col.width; } else if (col.getWidth) { return col.getWidth(); } else { return 100; } }
一堆操作获得表头-实际列json结构:
调用部分:
<ext:Button ID="Button3" runat="server" Text="导出全部页Excel" Icon="ArrowDown" TagString="grid"> <Listeners> <Click Handler="btnExportOut(SalaryBonusCalculationInForGPanel, 0)" /> </Listeners> </ext:Button>