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中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
使用jquery如何获取时间
Oct 13 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
vant 中van-list的用法说明
Nov 11 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
PHP闭包函数详解
2016/02/13 PHP
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
video.js添加自定义组件的方法
2020/12/09 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
python反编译学习之字节码详解
2019/05/19 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
python文件编写好后如何实践
2020/07/07 Python
python实现图片素描效果
2020/09/26 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
刊首寄语大全
2014/04/11 职场文书
作文批改评语大全
2014/04/23 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
2015年暑假工作总结
2015/07/13 职场文书
python微信智能AI机器人实现多种支付方式
2022/04/12 Python