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复选框checkbox实现删除前判断
Apr 20 Javascript
node.js中的fs.chownSync方法使用说明
Dec 16 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
简单实现js拖拽效果
Jul 25 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
详解vue中组件参数
Jul 09 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 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新手用的Insert和Update语句构造类
2012/03/31 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
javascript 数组的方法集合
2008/06/05 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
Python脚本实现网卡流量监控
2015/02/14 Python
Django中Forms的使用代码解析
2018/02/10 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
DNA测试:Orig3n
2019/03/01 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
公司请假条范文
2014/04/11 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
班主任开场白
2015/06/01 职场文书
2016高考寄语集锦
2015/12/04 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP