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 text,radio,checkbox,select操作实现代码
Jul 09 Javascript
javascript 流畅动画实现原理
Sep 08 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 Javascript
js单词形式的运算符
May 06 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 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
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
基于php缓存的详解
2013/05/15 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
Laravel 队列使用的实现
2019/01/08 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
Python 防止死锁的方法
2020/07/29 Python
python数据抓取3种方法总结
2021/02/07 Python
python爬虫如何解决图片验证码
2021/02/14 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
个性婚礼策划方案
2014/05/17 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
2015年派出所工作总结
2015/04/24 职场文书
三十年同学聚会致辞
2015/07/28 职场文书