Ext.net1.0之GridPanel数据导出Excel

本文是对官方DEMO的一点补充：http://examples.ext.net/#/GridPanel/Miscellaneous/Export_Data_PostBack/

 

在demo的excel导出中，有个明显的缺点就是导出了store中所有的数据，并且不包含gridpanel的header，header部分为store的field的name属性，这样的导出数据可读性太差。

 

在项目中遇到了导出需求，通过本人冥思苦想，终于改造出一个数据跟gridpanel一样的excel导出（内容和header，其他不包括）

场景：

 <ext:Hidden ID="GridData" runat="server" /> <ext:GridPanel ID="GridPanel1" runat="server"> ... </ext:GridPanel>

 

改造一：

var saveData = function () { // 获取gridpanel中所有的行 var rows = GridPanel1.getRowsValues({ selectedOnly: false }); if (!rows || typeof (rows) != 'object' || rows.length < 1) return false; var topRcd = rows[0]; var hdrRcd = new Array(); var notExistedInGrid = new Array(); // 添加header至尾部 for (field in topRcd) { fieldIndex = GridPanel1.colModel.findColumnIndex(field); if (fieldIndex < 0) { notExistedInGrid.push(field); continue; } header = GridPanel1.colModel.getColumnHeader(fieldIndex); hdrRcd.push(header); } // 移除grid中未显示的数据 $.each(rows, function (i, row) { $.each(notExistedInGrid, function (i, field) { delete row[field]; }); }); rows.push(hdrRcd); //首尾调换 var temp = rows[rows.length - 1]; rows[rows.length - 1] = rows[0]; rows[0] = temp; GridData.setValue(Ext.encode(rows)); };

改造二：删除XSL文件的以下部分（该部分提取XML的标签内容作为header）

<Row> <xsl:for-each select="*[position() = 1]/*"> <Cell> <Data ss:Type="String"> <xsl:value-of select="local-name()" /> </Data> </Cell> </xsl:for-each> </Row>

 

补充：针对异步分页时导出完整数据的处理：
1. 导出事件触发时，遍历gridpanel的columns，拼成json：[{'dataindex':'field1','header':'header1'},...]
2. 提交到后台后，解析为一个dtGridPanel（datatable），并获取当前页的数据源dtSource（datatable）
3. 循环，剔除dtSource中多余的column，再循环，按dtGridPanel中列出现顺序，将dtSource中的列重新排序
4. 将dtSource导出即可

---

广告:

夏季透气运动鞋：(匡威)  >>  查看详细情况