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

需求描述

实际应用中，咱们可能须要导出表格内容，或者在页面回发时根据用户权限下载文件（注意，这里的导出与下载，都是在后台进行的，和普通的一个连接下载文件不一样）。

点击按钮导出表格

因为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（开源版）中，因此在线示例暂不可用，须要的同窗请自行下载所有源代码，本机运行。 

 

若是本文对你有所启发或者帮助，请猛击“好文要顶”，支持原创，支持三石！

 

另附24张专业版高清大图