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 相关文章推荐
javascript 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 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中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Python变量访问权限控制详解
2019/06/29 Python
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
函授本科自我鉴定
2014/02/04 职场文书
优秀学生评语大全
2014/04/25 职场文书
三字经教学反思
2014/04/26 职场文书
2014年图书室工作总结
2014/12/09 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
Python基础之元类详解
2021/04/29 Python
Java基础之this关键字的使用
2021/06/30 Java/Android
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
angular异步验证器防抖实例详解
2022/03/31 Javascript