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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 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
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
django站点管理详解
2017/12/12 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
python矩阵的转置和逆转实例
2018/12/12 Python
详解Python with/as使用说明
2018/12/13 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
python3中sys.argv的实例用法
2020/04/24 Python
想学画画?python满足你!
2020/12/24 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
房产销售经理职责
2013/12/20 职场文书
论文指导教师评语
2014/04/28 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs