文档章节

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

三生石上
 三生石上
发布于 2014/06/24 10:28
字数 1086
阅读 430
收藏 3

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

需求描述

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

点击按钮导出表格

由于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张专业版高清大图

 

© 著作权归作者所有

三生石上

三生石上

粉丝 44
博文 21
码字总数 42096
作品 4
合肥
程序员
私信 提问
加载中

评论(0)

《FineUI秘密花园》在线阅读与完整PDF版

在线阅读 FineUI秘密花园(一) — 为什么选择FineUI? FineUI秘密花园(二) — 一切从头开始 FineUI秘密花园(三) — 站点级别的配置 FineUI秘密花园(四) — 页面级别的配置 FineUI秘密...

三生石上(FineUI控件)
2012/07/27
0
0
FineUI小技巧(2)将表单内全部字段禁用、只读、设置无效标识(另附48张专业版高清大图)

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

三生石上
2014/06/23
426
1
FineUI(开源版)V6.0 发布,ASP.NET 控件库

FineUI(开源版)v6.0.0 已经于 2016-10-24 发布! FineUI(开源版)v6.0 中FState服务器端验证的实现原理 FineUI(开源版)v6.0 全部源代码下载 FineUI(开源版)v6.0 更新记录 FineUI(开源...

三生石上
2016/10/24
2.3K
6
FineUI(专业版)公测版发布(这速度,真TM快!)

经过近一年的筹备、编码和测试,FineUI(专业版)公测版终于和大家见面了! 现在就来体验一下专业版飞一般的速度吧:http://fineui.com/demo_pro/ FineUI(专业版)首页:http://fineui.com...

三生石上
2014/08/04
5.2K
27
FineUIPro v3.5.0 发布,减少90%的上行数据量

FineUIPro v3.5.0 已经于 2017-03-02 发布,我们进行了 30 多项修正和增强,致力于稳定可信赖的产品体验。 目前官网示例和版本记录已更新: 官网示例:http://fineui.com/demo_pro/ 更新记录...

三生石上
2017/03/02
1.2K
3

没有更多内容

加载失败,请刷新页面

加载更多

Go Gin 简明教程

https://geektutu.com/post/quick-go-gin.html

Java搬砖工程师
57分钟前
19
0
2020中台建设-中台概述

一,什么是中台 ①,中台是能力的共享和沉淀, ②,中台是为前台服务的,有了中台,可快速构建前台应用. 二,为什么建设中台 ①,能力共享和沉淀,避免烟囱似建设 ②,快速搭建前台. 三,怎么建设中台 ...

Original123
59分钟前
15
0
如何更改远程Git存储库的URI(URL)? - How to change the URI (URL) for a remote Git repository?

问题: I have a repo (origin) on a USB key that I cloned on my hard drive (local). 我在硬盘驱动器(本地)上克隆的USB密钥上有一个回购(来源)。 I moved "origin" to a NAS and succ......

技术盛宴
今天
26
0
连接热点的电脑能注册到开热点电脑的注册中心,但是网关不能路由到服务实例

类似问题描述 1.连接热点的电脑能注册到开热点电脑的注册中心,但是网关不能路由到服务实例。2.微服务注册到到Eureka注册中心的ip不正确,导致网关路由不到具体为服务实例。3.Eureka注册...

LoSingSang
今天
14
0
利用flask部署keras模型报错

利用flask部署keras模型时报错: Tensor("dense_2/Softmax:0", shape=(?, 26), dtype=float32) is not an element of this graph. 解决方法 import tensorflow as tfgraph = tf.get_default......

hc321
今天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部