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 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
Vue.extend实现挂载到实例上的方法
May 01 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
vue ref如何获取子组件属性值
Mar 31 Vue.js
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
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
js倒计时显示实例
2016/12/11 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
vue实现通讯录功能
2018/07/14 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
教你学会使用Python正则表达式
2017/09/07 Python
python如何将图片转换为字符图片
2020/08/19 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
详解Python3中的 input() 函数
2020/03/18 Python
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
装修设计师求职信
2014/02/26 职场文书
房地产促销活动方案
2014/03/01 职场文书
个人合伙协议书范本
2014/10/14 职场文书
评职称个人总结
2015/03/05 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers