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获取电池状态的方法
May 03 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 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 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
美术师范毕业生自荐信
2013/11/16 职场文书
企业办公室岗位职责
2014/03/12 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
学校志愿者活动总结
2014/06/27 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
教师节慰问信
2015/02/15 职场文书
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js
nginx之queue的具体使用
2022/06/28 Servers
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技