文档章节

FineUI小技巧(3)表格导出与文件下载(另附24张专业版高清大图)

三生石上
 三生石上
发布于 2014/06/24 10:28
字数 1086
阅读 215
收藏 3
点赞 0
评论 0

需求描述

实际应用中,我们可能需要导出表格内容,或者在页面回发时根据用户权限下载文件(注意,这里的导出与下载,都是在后台进行的,和普通的一个链接下载文件不同)。

点击按钮导出表格

由于FineUI 默认支持AJAX,而导出与下载其实是一种破坏AJAX的操作,因为一般的导出代码如下所示:

Response.ClearContent();
Response.AddHeader("content-disposition", "attachment; filename=下载的文件.txt");
Response.ContentType = "text/plain";
Response.ContentEncoding = System.Text.Encoding.UTF8;
Response.Write("下载的文件内容");
Response.End();

这里直接对Response对象进行操作,所以在导出和下载时要禁用AJAX

比如通过按钮导出表格内容,我们来看下导出按钮的标签定义:

<f:Button ID="Button1" EnableAjax="false" DisableControlBeforePostBack="false"
runat="server" Text="导出为Excel文件" OnClick="Button1_Click">
</f:Button>

这里两个参数要注意:

  1. EnableAjax:表明本次导出操作非AJAX,也就是说点击此按钮时页面会刷新,但是页面上其他的操作任然是AJAX的。

  2. DisableControlBeforePostBack:这个参数默认是true,就是在AJAX操作之前禁用按钮,防止用户操作过快多次点击。这里非AJAX操作,自然要禁掉。

至于,表格的标签以及导出的代码,不是这篇文章的重点,就不再罗列,需要的网友可自行下载源代码。

  1. 运行页面截图

  2. 下载的文件

选择需要导出的列

有时我们仅仅需要导出表格中需要的列,最终实现效果如下所示:

  1.  在弹出窗口中选择需要导出的列

  2. 点击"导出"按钮产生的文件

这里我们的关注点不是如何导出选中的列,而是在那个后台消息处理中做这个导出?

实际上,当我们点击弹出窗体的"导出" 按钮时,事件处理是在Window的OnClose事件中进行的,如下所示:

protected void Window1_Close(object sender, FineUI.WindowCloseEventArgs e)
{
    Response.ClearContent();
    Response.AddHeader("content-disposition", "attachment; filename=MyExcelFile.xls");
    Response.ContentType = "application/excel";
    Response.ContentEncoding = System.Text.Encoding.UTF8;
    Response.Write(GetGridTableHtml(Grid1, e.CloseArgument.Split('#')));
    Response.End();
}

同样,由于这个过程直接操作了Response对象,会破坏FineUI默认的AJAX过程,所以关键点是要设置Window的EnableAjax=false,如下所示:

<f:Window ID="Window1" Title="选择需要导出的列" Hidden="true" EnableIFrame="true"
     EnableMaximize="true" Target="Top" EnableResize="true" runat="server" OnClose="Window1_Close"
     IsModal="true" Width="450px" Height="250px" EnableAjax="false">
 </f:Window>

表格行内文件下载(LineButtonField)

先来看下最终实现的效果:

注意,在这个界面中,不同按钮是否禁用AJAX不同:

  1. "选中了哪些行":启用AJAX

  2. "按钮"列:启用AJAX

  3. "下载"列:禁用AJAX

如果是仅仅设置表格的 EnableAjax=false,虽然可能正常完成"下载"列的功能,但是"按钮"列也会导致页面刷新,这就不对。

解决办法也很简单,让表格继承PageManager或者Web.config的默认设置(EnableAjax=true),然后设置"下载"列的EnableAjax=false,如下所示:

<f:LinkButtonField HeaderText="&nbsp;" Width="80px" CommandName="Action1" Text="按钮" />
<f:LinkButtonField HeaderText="&nbsp;" EnableAjax="false" Width="80px" CommandName="Action2" Text="下载" />

再来看下后台的事件处理:

protected void Grid1_RowCommand(object sender, FineUI.GridCommandEventArgs e)
{
    object[] keys = Grid1.DataKeys[e.RowIndex];
    string result = String.Format("你点击了第 {0} 行,第 {1} 列,行命令是 {2}", e.RowIndex + 1, e.ColumnIndex + 1, e.CommandName) +
               "<br>" +
               String.Format("当前行数据 - 编号:{0},姓名:{1}", keys[0], keys[1]);

    if (e.CommandName == "Action1")
    {
        // AJAX回发
        labResult.Text = result;
    }
    else if (e.CommandName == "Action2")
    {
        result = result.Replace("<br>", "\r\n");

        // 非AJAX回发
        Response.ClearContent();
        Response.AddHeader("content-disposition", "attachment; filename=row_" + e.RowIndex + ".txt");
        Response.ContentType = "text/plain";
        Response.ContentEncoding = System.Text.Encoding.UTF8;
        Response.Write(result);
        Response.End();
    }
}

本章小结

本篇文章介绍了导出表格与下载文件的三个不同场景,大家要意识到这种对Response的直接操作,破坏了FineUI的默认AJAX处理,因此要禁用AJAX。

源代码与在线示例

本系列所有文章的源代码均可自行下载:http://fineui.codeplex.com/

在线示例:

  1. http://fineui.com/demo/#/demo/grid/grid_excel.aspx

  2. http://fineui.com/demo/#/demo/grid/grid_excel_selectcolumns.aspx

  3. http://fineui.com/demo/#/demo/grid/grid_rowcommand_download.aspx

第三个示例会增加到下个版本的FineUI(开源版)中,所以在线示例暂不可用,需要的同学请自行下载全部源代码,本机运行。 

 

如果本文对你有所启发或者帮助,请猛击&ldquo;好文要顶&rdquo;,支持原创,支持三石!

 

另附24张专业版高清大图

 

© 著作权归作者所有

共有 人打赏支持
三生石上

三生石上

粉丝 43
博文 21
码字总数 42096
作品 4
合肥
程序员
FineUI小技巧(2)将表单内全部字段禁用、只读、设置无效标识(另附48张专业版高清大图)

需求描述 对表单内的所有字段进行操作也是常见需求,这些操作有: 禁用:表单字段变灰,不响应用户动作。 只读:表单字段不变灰,但不接受用户输入(实际上是设置DOM节点的readonly属性),有...

三生石上
2014/06/23
0
1
FineUI小技巧(7)多表头表格导出

前言 之前我们曾写过一篇文章 FineUI小技巧(3)表格导出与文件下载,对于在 FineUI 中导出表格数据进行了详细描述。今天我们要更进一步,介绍下如何导出多表头表格。 多表头表格的标签定义 ...

三生石上
2014/11/18
0
0
如何优化 FineUI 控件库的性能,减少 80% 的数据上传量!

不管是第一次使用 FineUI 控件库的网友,还是有着 3 年以上使用经验的网友,都对 FineUI 的简单印象深刻。当然,“一切为了简单”也是 FineUI 一句响亮的口号,不仅如此,一个开源项目要想立...

三生石上
2012/12/21
0
0
#CSDN刷票门# 有没有人在恶意刷票?CSDN请告诉我!用24小时监控数据说话!

特别声明: 此次并非针对其他参与2013中国十大优秀开源项目的同行,体系有漏洞要谴责的是制定规则并从中获益但不作为的权贵,草根们制定不了规则但可发现和利用漏洞,这是程序员应有反叛精神...

三生石上
2013/06/26
0
18
纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录...

前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明FineUI旺盛的...

三生石上
2013/08/01
0
20
Java快速开发平台,JEECG 3.7.7闪电版本发布,增加多套主流UI代码生成器模板

JEECG 3.7.7 闪电版本发布,提供5套主流UI代码生成器模板 导读 ⊙平台性能优化,速度闪电般提升 ⊙提供5套新的主流UI代码生成器模板(Bootstrap表单+BootstrapTable列表 ElementUI列表表单)...

Jeecg
昨天
0
0
JEECG 3.7.7 发布,增加多套主流 UI 代码生成器模板

JEECG 3.7.7闪电版本发布,提供5套主流UI代码生成器模板 导读 ⊙平台性能优化,速度闪电般提升 ⊙提供5套新的主流UI代码生成器模板 ⊙表单UI深度优化,平台UI风格升级一个级别 ⊙灵活通用代码...

Jeecg
昨天
0
0
AppBox升级进行时 - 拥抱Entity Framework的Code First开发模式

AppBox 是基于 FineUI 的通用权限管理框架,包括用户管理、职称管理、部门管理、角色管理、角色权限管理等模块。 从Subsonic到Entity Framework Subsonic最早发布于2008年,当时他的无代码生...

三生石上
2013/08/29
0
0
JEECG 3.7.5 Vue SPA 单页面应用版本发布

此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板ElementUI风格、Bootstrap分隔,大家速度体验,新鲜出炉,哇咔咔!! JEECG 是一款基...

Jeecg
05/31
0
0
AppBoxPro - 细粒度通用权限管理框架(可控制表格行内按钮)源码提供下载

特别声明: 提供的源代码已经包含了 AppBoxPro 的全部源代码,用 VS2012 打开项目后,直接 Ctrl+F5 可以运行起来(默认使用VS自带的LocalDB数据库)。 FineUIPro是商业程序,仅包含v1.7.0公测...

三生石上
2014/10/17
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mybaitis 通过Mapping 实现多表查询

1.实体类 1.1 用于做多表查询的类 public class CustomerCard { private Integer id;//主键 private String cardNumber; private Integer customerId;//用户id private String customerName;......

kuchawyz
9分钟前
0
0
Java语言学习(八):集合类框架

Java中提供了各种数据集合类,这些类主要用于保存复杂结构的数据。下面将介绍常用的几种集合类的用法。 ArrayList集合可以看做一个动态的数组,比普通数组更加灵活,更适合保存未知数量的数据...

海岸线的曙光
11分钟前
0
0
SpringBoot下Redis相关配置是如何被初始化的

参考网页 SpringBoot集成Redis的原理 https://blog.csdn.net/hry2015/article/details/74276423 https://blog.csdn.net/hry2015/article/details/75451705 application.yml配置文件中的属性是......

karma123
11分钟前
1
0
数据库事务的四大特性以及事务的隔离级别

本篇讲述数据库中事务的四大特性(ACID),并且将会详细地说明事务的隔离级别。 如果一个数据库声称支持事务的操作,那么该数据库必须要具备以下四个特性: ⑴ 原子性(Atomicity) 原子性是...

Java大蜗牛
19分钟前
0
0
Spring Boot 整合 MyBatis/通用Mapper/PageHelper分页插件

整合MyBatis 整合通用Mapper 1. POM依赖配置 <properties><mapper.starter.version>2.0.3-beta1</mapper.starter.version></properties><!-- 通用Mapper --><dependency><groupId>t......

OSC_fly
27分钟前
0
0
CentOS7 双网卡绑定

环境 操作系统 CentOS7.5,禁用 NetworkManager 服务 网卡 eth0 网卡 eth1 绑定网卡 bond0 网卡 eth0 配置 修改 /etc/sysconfig/network-scripts/ifcfg-eth0 TYPE=EthernetBOOTPROTO=noneD......

Colben
29分钟前
0
0
zk实战--rpc框架集群化

在看此篇内容时需要浏览下面内容 netty实战--手写rpc框架 前文功能简介以及功能扩充 利用netty来实现一个点对点的rpc调用。客户端和服务端都是靠手写地址进行socket同学的,无法1对多,也无法...

xpbob
45分钟前
12
0
springboot 发送邮件

获取授权码 添加配置 # 账号和密码spring.mail.username=aaa@qq.comspring.mail.password=bbb# 服务器地址spring.mail.host=smtp.qq.comspring.mail.properties.mail.smtp.ssl.en...

阿豪boy
46分钟前
0
0
如何使用GNU Ring?

文章名:如何使用GNU Ring? 作者:冰焰火灵X 1079092922@qq.com 文章许可:CC BY-SA 4.0 ##1. 安装 下载GNU Ring 点击左边选择你的系统版本(这里以 GNU/Linux 为例,我使用的是Mint 18.3)...

ICE冰焰火灵X
48分钟前
4
0
深入理解springMVC

什么是spring MVC Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构,从而...

Java填坑之路
54分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部