【分享】自己写了一个Ext 3.x Grid后台分页 + Grid数据导出为Excel示例

最新推荐文章于 2015-05-17 16:47:00 发布
最新推荐文章于 2015-05-17 16:47:00 发布
阅读量82 收藏
点赞数
分类专栏： Extjs 文章标签： EXT Grid to Excel
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kui5656/article/details/84183299
版权

废话不多说，直接上菜，示例只有包括几个文件，结构如下：


分页效果如下图：


 

 

导出的Excel效果如下图：

 

 

kui5656
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJS4 动态生成的grid导出为excel示例
12-09
解决了一个表格不能重复下载的小BUG，一个使用grid初始化发生的BUG 下面记录一下步骤。说不定下次还有用 1.下载需要用到js代码，我已经上传 2.在你的html文件中加入引用，路径问题自己 注意下，下面是我的路径 代码...
J2EE之 Extjs4.0 Grid 分页显示
skyxuyan的专栏
01-13 9694
ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。 功能丰富，无人能出其右。 无论是界面之美，还是功能之强，ext的表格控件都高居榜首。 单选行，多选行，高亮显示选中的行，拖拽改变列宽度，按列排序，这些基本功能ExtJS轻量级实现。 自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些
通用的web系统数据导出功能设计实现（导出excel2003/2007 word pdf zip等）
jumtre的专栏
11-14 3057
前言 我们在做web系统中，导出也是很常用的一个功能，如果每一个数据列表都要对应写一个导出的方法不太现实。现在就想设计一个共通的功能来实现这个导出。 需求分析 在开始之前我们先要明白我们要实现怎样一个功能  1、支持导出excel2003/excel2007 word pdf等文件格式  2、支持数据分页，可以导出全部页或指定页  3、支持导出的文档再压缩zip rar 7
Ext.Net-Grid 篇
05-17 216
概述 前两篇分别介绍了Ext.NET-基础 和 Ext.NET-布局，从本篇开始我们尽量做一些实际工作中用到的例子。 在Ext.NET官方示例中，关于GridPanel的例子是最多的(近百个)，篇幅所限，我们这里只介绍一些常用的功能，包括页面布局、新建、编辑、查询、删除、排序、分组、统计等功能。 示例代码下载地址>>>>> 页面总体布局 首先，再来熟悉下前一...
ExtJS的form和grid结合示例
微风
10-13 752
<script type="text/javascript"> //页面布局开始 //初始化 var queryForm; Ext.onReady(function(o){ // 因为我采用的是内嵌的ifram，所以这行为设定父panel的高度，根据页面显示内容调整自定义页面高度 parent.tabs.setHeight(574); ...
Ext Grid数据导出到Excel
12-31
Grid数据导出到Excel文件，尝试了三种方法，并比较。
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
09-04
主要介绍了Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法,本文中的事件指collapsebody和expandbody事件,需要的朋友可以参考下
Ext Grid 导出Excel
03-21
NULL 博文链接：https://damen.iteye.com/blog/946039
Ext grid导出excel
05-22
支持Ext3 Ext4导出excel,客户端导出表格，支持各种主流浏览器。
智慧酒店项目智能化系统汇报方案qy.pptx
04-30
智慧酒店项目智能化系统汇报方案qy.pptx
基于C语言编写的高并发Epoll服务器.zip
04-30
基于C语言编写的高并发Epoll服务器.zip
liba2ps1-4.14-bp156.5.5.ppc64le.rpm
04-30
liba2ps1-4.14-bp156.5.5.ppc64le
基于matlab实现囚徒困境中的博弈策略的模拟：尝试了采用几种策略进行博弈使最终双赢的概率变大.rar
最新发布
04-30
基于matlab实现囚徒困境中的博弈策略的模拟：尝试了采用几种策略进行博弈使最终双赢的概率变大.rar
毕业设计：springboot的乐器社区网站设计与实现（源码 + 数据库 + 说明文档）
04-30
毕业设计：springboot的乐器社区网站设计与实现（源码 + 数据库 + 说明文档） 2相关技术介绍 3 2.1 MySQL数据库简介 3 2.2 springboot编程技术 3 2.3 VUE框架 3 2.4 B/S结构 4 3系统可行性分析 5 3.1概况 5 3.2可行性研究的前提 5 3.3可行性分析 6 3.3.1技术的可行性 6 3.3.2经济的可行性 6 3.3.3操作可行性 6 3.3.4法律的可行性 7 3.4设计的基本思想 7 3.5性能需求 7 3.5.1系统的安全性 7 3.5.2数据的完整性 7 4 系统设计 9 4.1总体设计 9 4.2数据库的分析与设计 9 4.3数据库表 10 第五章 系统功能实现 12 5.1 乐器社区网站首页界面 12 5.2 乐器信息列表界面 12 5.3管理员管理界面 13 5.4新建乐器信息界面 14 5.5二手商品购买界面 14 6 系统测试 15 6.1测试说明 15 6.2功能测试 15 6.3可用性测试 15 6.5性能测试 16 6.6用例测试 16 6.7测试结果 16
2024-2030全球及中国鼓机踏板行业研究及十五五规划分析报告.docx
04-30
2024-2030全球及中国鼓机踏板行业研究及十五五规划分析报告
毕业设计：基于springboot的中小企业财务管理系统（源码 + 数据库 + 说明文档）
04-30
毕业设计：基于springboot的中小企业财务管理系统（源码 + 数据库 + 说明文档） 2　开发技术简介 6 2.1　基于B/S结构开发 6 2.2 jsp语言简介 6 2.3MYSQL简介 6 2.4　eclipse工具 7 3　需求分析 7 3.1　可行性分析 7 3.1.1　经济可行性 7 3.1.2 技术可行性 7 3.1.3 操作可行性 7 3.2　功能需求分析 8 3.3　非功能需求分析 8 4　系统设计 9 4.1　数据库设计 9 4.2　系统模块总体设计 10 5　系统详细设计 10 5.1　后台登录页面 10 5.2　管理员信息 11 5.3　财务人员信息 11 5.4　资产负债 12 5.5　税收管理 12 6　系统测试 13 6.1　测试的目的 13 6.2　测试的方法 13 6.3　测试的重要性 14 6.4　测试内容 14 6.5　测试结果 14
基于Springboot集成yolo3构建基于神经网络的图片识别系统源码.zip
04-30
基于Springboot集成yolo3构建基于神经网络的图片识别系统源码.zip基于Springboot集成yolo3构建基于神经网络的图片识别系统源码.zip基于Springboot集成yolo3构建基于神经网络的图片识别系统源码.zip基于Springboot集成yolo3构建基于神经网络的图片识别系统源码.zip基于Springboot集成yolo3构建基于神经网络的图片识别系统源码.zip基于Springboot集成yolo3构建基于神经网络的图片识别系统源码.zip基于Springboot集成yolo3构建基于神经网络的图片识别系统源码.zip基于Springboot集成yolo3构建基于神经网络的图片识别系统源码.zip基于Springboot集成yolo3构建基于神经网络的图片识别系统源码.zip基于Springboot集成yolo3构建基于神经网络的图片识别系统源码.zip基于Springboot集成yolo3构建基于神经网络的图片识别系统源码.zip基于Springboot集成yolo3构建基于神经网络的图片识别系统源码.zip基于Springboot集成yolo3构
基于C#的开源音乐播放器MetroPlayer.zip
04-30
基于C#的开源音乐播放器MetroPlayer.zip
用extjs写一个grid表格数据修改后，后台数据也随之修改的完整例子
03-26
以下是一个完整的示例，用ExtJS 6.5编写，它演示了如何在Grid中编辑数据，并使用Ajax将更改保存到后端。 在这个例子中，我们将创建一个向后端服务器发送请求并接收响应的PHP脚本。它应该返回一个JSON编码的数组，我们将用来填充Grid数据。 PHP文件 fetchdata.php： ```php <?php // 模拟从服务器获取数据 $data = array( array('id'=>1, 'name'=>'张三', 'age'=>26), array('id'=>2, 'name'=>'李四', 'age'=>32), array('id'=>3, 'name'=>'王五', 'age'=>45), array('id'=>4, 'name'=>'赵六', 'age'=>18), array('id'=>5, 'name'=>'钱七', 'age'=>40) ); // 将数据返回为JSON格式 echo json_encode($data); ?> ``` 下面是ExtJS代码，包括Grid和与服务器进行通信的Ajax请求： ```javascript Ext.onReady(function(){ // 创建数据模型 Ext.define('Person', { extend: 'Ext.data.Model', fields: [ 'id', 'name', 'age' ] }); // 创建存储 var store = Ext.create('Ext.data.Store', { model: 'Person', proxy: { type: 'ajax', url: 'fetchdata.php', reader: { type: 'json', rootProperty: '' } }, autoLoad: true }); // 创建列模型 var columns = [ { text: 'ID', dataIndex: 'id' }, { text: '姓名', dataIndex: 'name', editor: 'textfield' }, { text: '年龄', dataIndex: 'age', editor: 'numberfield' } ]; // 创建Grid var grid = Ext.create('Ext.grid.Panel', { renderTo: Ext.getBody(), store: store, columns: columns, selModel: 'cellmodel', plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ], listeners: { // 在单元格编辑后立即保存更改 edit: function(editor, e){ Ext.Ajax.request({ url: 'savechanges.php', method: 'POST', jsonData: e.record.data, success: function(response, opts){ //console.log(response.responseText); var obj = Ext.decode(response.responseText); if(obj.success){ Ext.Msg.alert('成功', '数据已保存'); store.load(); } else { Ext.Msg.alert('错误', obj.error); } }, failure: function(response, opts){ Ext.Msg.alert('错误', response.statusText); } }); } } }); }); ``` 注意： - CellEditing 插件可在单元格编辑时自动保存更改。 - 在保存更改时，我们使用Ajax请求将数据发送到名为 savechanges.php 的PHP文件。 - 在保存请求成功时，我们刷新存储以便更新Grid中的数据。 下面是PHP文件savechanges.php，我们稍后将用它来保存更改： ```php <?php // 获取POST数据 $data = json_decode(file_get_contents('php://input')); // 将更改保存到数据库 // 这里是我们自己的代码，为了演示，我们只返回成功。 $response = array('success'=>true); // 将响应数据转换为JSON格式并发送回来 echo json_encode($response); ?> ``` 在本地web服务器上运行这些代码后，您应该会看到一个包含可编辑单元格的Grid。更改数据时，单元格的背景色将变为黄色，表示它们已更改但尚未保存。保存更改时，将出现保存状态或错误消息。 希望这个例子对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值