Rumah hujung hadapan web tutorial js ExtJS4 动态生成的grid导出为excel示例_extjs

ExtJS4 动态生成的grid导出为excel示例_extjs

May 16, 2016 pm 04:50 PM
grid

搜索了蛮久,找到一些例子,因为我是初学者的缘故大多不知道怎么使用。。

研究了一下那个源码,搞到现在终于实现了基本的下载。解决了一个表格不能重复下载的小BUG,一个使用grid初始化发生的BUG

下面记录一下步骤。说不定下次还有用

1.下载需要用到js代码,我已经上传 

2.在你的html文件中加入引用,路径问题自己 注意下,下面是我的路径

复制代码 代码如下:

;

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示例_extjs 
ExtJS4 动态生成的grid导出为excel示例_extjs 
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Membawa anda langkah demi langkah untuk melaksanakan dadu 3D menggunakan CSS Flex dan susun atur Grid (dengan kod) Membawa anda langkah demi langkah untuk melaksanakan dadu 3D menggunakan CSS Flex dan susun atur Grid (dengan kod) Sep 23, 2022 am 09:58 AM

Dalam temu bual bahagian hadapan, kami sering ditanya bagaimana untuk melaksanakan susun atur dadu/mahjong menggunakan CSS. Artikel berikut akan memperkenalkan anda kepada kaedah menggunakan CSS untuk mencipta dadu 3D (lentur dan susun atur Grid untuk melaksanakan dadu 3D, saya harap ia akan membantu anda!

Sifat susun atur panel CSS: grid dan grid-template-lajur Sifat susun atur panel CSS: grid dan grid-template-lajur Oct 25, 2023 am 08:15 AM

Sifat susun atur panel CSS: grid dan grid-template-lajur Dalam reka letak halaman web moden, reka letak panel ialah kaedah reka bentuk biasa yang boleh mengatur kandungan web dalam grid. Atribut susun atur grid dalam CSS dan atribut grid-template-columns adalah kunci untuk merealisasikan reka letak panel. 1. Pengenalan kepada atribut susun atur grid Atribut susun atur grid ialah atribut yang digunakan untuk mencipta susun atur grid dalam CSS Dengan menukar HTML

Ketahui tentang lima rangka kerja reka letak CSS yang biasa digunakan Ketahui tentang lima rangka kerja reka letak CSS yang biasa digunakan Jan 16, 2024 am 09:20 AM

Rangka kerja susun atur CSS: Terokai lima rangka kerja susun atur yang biasa digunakan Pengenalan: Dalam reka bentuk web, reka letak adalah bahagian yang penting. Rangka kerja reka letak CSS boleh membantu kami membina halaman web dengan cepat dengan gaya reka letak yang berbeza. Artikel ini akan memperkenalkan lima rangka kerja reka letak CSS yang biasa digunakan dan menyediakan contoh kod khusus untuk membantu pembaca memahami dan menggunakan rangka kerja ini dengan lebih baik. 1. Bootstrap: Bootstrap ialah salah satu rangka kerja susun atur CSS yang paling popular pada masa ini. Ia mempunyai komponen yang kaya dan ciri responsif yang berkuasa yang boleh

Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Purata Grid Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Purata Grid Oct 19, 2023 am 10:49 AM

Tutorial HTML: Cara Menggunakan Tataletak Grid untuk Tataletak Purata Grid Dalam reka bentuk web, susun atur grid (GridLayout) ialah kaedah susun atur yang biasa digunakan Ia boleh membahagikan kandungan web kepada berbilang lajur dan melaksanakan susunan dan reka letak yang fleksibel. Tutorial ini akan memperkenalkan cara menggunakan reka letak Grid HTML dan CSS untuk melaksanakan susun atur purata grid dan memberikan contoh kod khusus. 1. Apakah susun atur grid? Susun atur grid ialah kaedah susun atur yang membahagikan halaman kepada lajur Lajur ini boleh disusun mengikut baris dan

Teknik pelaksanaan UniApp untuk susun atur halaman dan reka bentuk responsif Teknik pelaksanaan UniApp untuk susun atur halaman dan reka bentuk responsif Jul 05, 2023 pm 01:57 PM

Kemahiran pelaksanaan UniApp untuk melaksanakan reka letak halaman dan reka bentuk responsif Pengenalan: UniApp ialah alat pembangunan merentas platform berdasarkan rangka kerja Vue.js, yang boleh membangunkan aplikasi untuk berbilang platform secara serentak seperti iOS, Android dan H5. Artikel ini akan memperkenalkan cara menggunakan UniApp untuk melaksanakan reka letak halaman dan reka bentuk responsif, dan menyediakan beberapa contoh kod praktikal. 1. Susun atur halaman Susun atur fleksibel Susun atur fleksibel ialah kaedah yang biasa digunakan dalam susun atur halaman, yang secara automatik boleh menyesuaikan diri dengan saiz skrin dan peranti yang berbeza. Dalam UniApp

Petua pengoptimuman sifat reka letak adaptif CSS: flex dan grid Petua pengoptimuman sifat reka letak adaptif CSS: flex dan grid Oct 21, 2023 am 08:03 AM

Petua pengoptimuman atribut reka letak adaptif CSS: flex dan grid Dalam pembangunan web moden, melaksanakan susun atur penyesuaian adalah tugas yang sangat penting. Dengan populariti peranti mudah alih dan kepelbagaian saiz skrin, adalah keperluan penting untuk memastikan tapak web boleh dipaparkan dengan baik pada pelbagai peranti dan menyesuaikan diri dengan saiz skrin yang berbeza. Nasib baik, CSS menyediakan beberapa sifat dan teknik yang berkuasa untuk melaksanakan reka letak penyesuaian. Artikel ini akan menumpukan pada dua sifat yang biasa digunakan: flex dan grid, dan memberikan contoh kod khusus.

Penjelasan terperinci tentang sifat susun atur relatif CSS: kedudukan dan relatif Penjelasan terperinci tentang sifat susun atur relatif CSS: kedudukan dan relatif Oct 26, 2023 am 10:01 AM

Penjelasan terperinci tentang sifat susun atur relatif CSS: kedudukan dan relatif Dalam pembangunan bahagian hadapan, reka letak selalunya menjadi masalah yang perlu dihadapi oleh pembangun Untuk mengawal kedudukan elemen pada halaman dengan lebih baik, CSS menyediakan pelbagai kaedah reka letak. Antaranya, reka letak relatif adalah kaedah susun atur yang sangat biasa Dengan menggunakan kedudukan dan atribut relatif, kita boleh melaraskan kedudukan dan saiz elemen secara fleksibel. Atribut kedudukan digunakan untuk menentukan kaedah penentududukan nilai biasa

Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Item Grid Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Item Grid Oct 21, 2023 am 11:54 AM

Tutorial HTML: Cara Menggunakan Susun Atur Grid untuk Susun Atur Item Grid, Contoh Kod Khusus Diperlukan Pengenalan: Dalam pembangunan web, susun atur merupakan aspek yang penting. Reka letak grid ialah cara yang sangat berkuasa dan fleksibel untuk mencipta susun atur item grid raster. Artikel ini akan memperkenalkan cara menggunakan reka letak Grid untuk membina reka letak halaman web dan menyediakan beberapa contoh kod khusus untuk membantu anda memahami dan menggunakan reka letak Grid dengan lebih baik. Bahagian 1: Pengenalan kepada Susun Atur Grid Susun atur grid ialah ciri baharu CSS yang bertujuan untuk menyediakan

See all articles