Wijmo 更优美的jQuery UI部件集:导出Wijmo的GridView到Excel

简介: Wijmo GridView 控件不提供导出Excel文件的方法。本篇博客介绍一种将Wijmo的GridView控件保存到Excel的简单方法。你可以使用同样的方法在C1 WebUI GridView上。

Wijmo GridView 控件不提供导出Excel文件的方法。本篇博客介绍一种将Wijmo的GridView控件保存到Excel的简单方法。你可以使用同样的方法在C1 WebUI GridView上。

 

步骤1 : C1GridView绑定至数据源

第一步是将C1GridView绑定到数据源。为了简单起见,我们将其绑定到C1Nwind.mdb的Customers表。

image

 

步骤2 : 导出C1GridView Excel

导出到Excel需要分成两步。第一步是将GridView保存至一个HTML字符串。

Web控件有一个RenderControl()方法可以将服务器端控件的内容输出到指定的HtmlTextWriter对象。如果启用了Tracing,该方法还将存储控件的Trace信息。然后该HtmlTextWriter对象输出到一个StringWriter 对象。

下面的方法被用来创建一个字符串:

Public Function DataGridToExcel(ByVal dgExport As C1.Web.Wijmo.Controls.C1GridView.C1GridView) As String

    '创建一个stringwriter

    Dim stringWrite As New System.IO.StringWriter()

    '创建一个使用该stringwriter的htmltextwriter

    Dim htmlWrite As New System.Web.UI.HtmlTextWriter(stringWrite)

    Dim dg As C1.Web.Wijmo.Controls.C1GridView.C1GridView

    'just set the input datagrid = to the new dg grid

    dg = dgExport

    '将header的字体加粗

    dg.HeaderStyle.Font.Bold = True

    '如果需要,这里是在组件级别改变颜色/格式

    dg.HeaderStyle.ForeColor = System.Drawing.Color.Black

    dg.RowStyle.ForeColor = System.Drawing.Color.Black

    '绑定修改后的datagrid

    '告诉datagrid将自己呈现到我们提供的htmltextwriter

    dg.AllowSorting = False

    dg.AllowPaging = False

    dg.AllowCustomPaging = False

    '新的代码

    Dim parent As Control = dg.Parent

    parent.Controls.Remove(dg)

    dg.RenderControl(htmlWrite)

    '新的代码

    parent.Controls.Add(dg)

    '输出HTML

    Return stringWrite.ToString()

End Function

 

 

image

 

下一步,我们将在一个Button Click事件中调用这个DownloadToExcel 方法从保存的字符串创建一个excel文件。

Public Sub DownloadToExcel(ByVal content As String, ByVal response As HttpResponse)

'清理 response.object

response.Clear()

response.Buffer = True

response.Charset = ""

'设置响应的MIME类型为excel

response.ContentType = "application/vnd.ms-excel"

response.ContentEncoding = New System.Text.UTF8Encoding()

response.Write(content)

response.End()

End Sub

 

 image

 

实现时的问题

在相当多的情况下,你会在导出时遇到一些错误。你可能会收到一条错误信息:“RegisterForEventValidation 只能在Render()过程中被调用;”。在这种情况下,请尝试以下方法:


1. 你可以向下面的文章描述的那样,重载VerifyRenderingInServerForm 方法:

http://connect.microsoft.com/VisualStudio/feedback/details/118285/rendercontrol-doesnt-work-for-gridview

Public Overrides Sub VerifyRenderingInServerForm(control As Control)

End Sub

 

2. 为了避免收到“RegisterForEventValidation 只能在Render()过程中被调用;”异常,可以关闭Page.EnableEventValidation 或者将RenderControl方法调用放置在一个try-catch块中。

此外,如果gridview包含一个复选框或者一个模板列,你会收到上面的错误。目前已发现微软发布的GridView会发生同样的错误。由于C1GridView继承自微软发布的GridView,所以它是C1GridView的已知设计问题。

 

下载示例 

 

Wijmo下载,请进入Studio for ASP.NET Wijmo 2012 v1正式发布(2012.03.22更新)!

相关文章
|
JSON 前端开发 JavaScript
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
1742 0
|
Web App开发 缓存 JavaScript
JQuery Kendo UI使用技巧总结
JQuery Kendo UI使用技巧总结
140 4
|
JavaScript 前端开发 Shell
Element-ui Table表格导出功能的实现
Element-ui Table表格导出功能的实现
465 0
|
JavaScript BI
jQuery根据填写的input的数值导出excel表格
jQuery根据填写的input的数值导出excel表格
130 0
jquery-easyui和jquery-ui的slider冲突解决
jquery-easyui和jquery-ui的slider冲突解决
|
前端开发
前端项目实战肆拾壹-​react-admin+material ui-单表导出去除
前端项目实战肆拾壹-​react-admin+material ui-单表导出去除
109 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件 切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
332 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
490 0
|
JavaScript 前端开发 程序员
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件
【首先要声明一点,技术不分好坏,能用好就行,不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始,看到比较新颖的移动端时间选择组件是在某款手机上,分年月日下拉选择,UI界面也挺好看的 除了讲解实现的步骤以及关键点,文章最后面会有完整的代码
466 0
|
前端开发 JavaScript 程序员
【前端】使用jQuery封装一套UI组件 - 单选框
目前前端技术发展非常快,各大厂都开源和分享了自家的前端框架,非常多成熟的UI组件供大家选择,很实用也很方便,给开发上节省了不少时间成本,当然少不了学习成本,不过也不会占用太多时间,只要有前端基础的话,原理基本都是通用的,只是写法不一样。 因此,除了学习现有的优秀前端之外,最好能自己根据原理封装一套自己的UI组件,目的是为了更好的理解前端知识点以及锻炼编程逻辑
305 0

相关课程

更多