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 相关文章推荐
JScript的条件编译
May 29 Javascript
用JS剩余字数计算的代码
Jul 03 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
JS Replace()的高级使用方法介绍
Jun 29 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 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中数据按分类嵌套循环实现方法
2014/10/30 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
基于python实现聊天室程序
2018/07/27 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
pygame实现非图片按钮效果
2019/10/29 Python
利用python 读写csv文件
2020/09/10 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
开办大学饮食联盟创业计划书
2014/01/29 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
学生保证书格式
2015/02/27 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
河童之夏观后感
2015/06/11 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
matlab xlabel位置的设置方式
2021/05/21 Python
入门学习Go的基本语法
2021/07/07 Golang
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python
进行数据处理的6个 Python 代码块分享
2022/04/06 Python
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript