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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
深入理解vue Render函数
Jul 19 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
JavaScript实现轮播图效果
Oct 30 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 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
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
微信小程序日历组件使用方法详解
2018/12/29 Javascript
Python创建xml的方法
2015/03/10 Python
对于Python中线程问题的简单讲解
2015/04/03 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
在pycharm中显示python画的图方法
2019/08/31 Python
python中class的定义及使用教程
2019/09/18 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
python 如何引入协程和原理分析
2020/11/30 Python
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
求职简历的自我评价
2014/01/31 职场文书
装修设计师求职信
2014/02/26 职场文书
高考标语大全
2014/06/05 职场文书
银行招聘自荐信
2015/03/06 职场文书
致接力运动员加油稿
2015/07/21 职场文书
python实现简单石头剪刀布游戏
2021/10/24 Python
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server