ExtJS4 动态生成的grid导出为excel示例


Posted in Javascript onMay 02, 2014

搜索了蛮久,找到一些例子,因为我是初学者的缘故大多不知道怎么使用。。

研究了一下那个源码,搞到现在终于实现了基本的下载。解决了一个表格不能重复下载的小BUG,一个使用grid初始化发生的BUG

下面记录一下步骤。说不定下次还有用

1.下载需要用到js代码,我已经上传 

2.在你的html文件中加入引用,路径问题自己 注意下,下面是我的路径

<script type="text/javascript" src="../export/export-all.js" ></script>;

3.在你要用到的JS代码的Ext.onReady()的开始加上
Ext.Loader.setConfig({ enabled: true }); 
Ext.Loader.setPath('Ext.ux.exporter', '../export/exporter'); 
Ext.require([ 
'Ext.ux.exporter.Exporter' 
]);

设置命名空间。。注意路径

4.在代码里面使用,在你需要下载功能的grid处合适的地方加入

xtype: 'exporterbutton', 
// store: store 
component: Ext.getCmp('gird_a')

这是两种初始化excel的方式,一种用store初始化,使用store的fields和data,因为我的store中的fields名字是英文,导出来的列名是英文所以我没有使用这种,而是直接用grid进行初始化。

下面说下在别人的代码基础上我修改的地方

1.在exporter.js第40行,改成了

var columns = Ext.Array.filter(grid.columnManager.columns,

原来的代码在第一个参数那里是grid.columns,后来我发现动态生成的grid在reconfigure之后columns放在columnManager.columns里,所以这么改

2.在workbook.js中77.78行,加了两句话

this.styles=[]; 
this.worksheets=[];

以上2行代码进行一些初始化,否则excel每次生成因为没有清空之前的数据导致格式错误

经过以上的简单修改已经可以对一个grid随意导出,并且支持对定制字段的表格导出,即导出表格显示的列

效果图在这里:
ExtJS4 动态生成的grid导出为excel示例 
ExtJS4 动态生成的grid导出为excel示例 

Javascript 相关文章推荐
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 #Javascript
jquery等待效果示例
May 01 #Javascript
js实现checkbox全选和反选示例
May 01 #Javascript
jquery插件之定时查询待处理任务数量
May 01 #Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 #Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 #Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 #Javascript
You might like
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
python实现爬虫下载美女图片
2015/07/14 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
Python绘制数码晶体管日期
2021/02/19 Python
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
销售演讲稿范文
2014/01/08 职场文书
优秀实习生感言
2014/03/01 职场文书
物流管理专业求职信
2014/05/29 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书