Jquery easyui datagrid 导出Excel
From：http://www.cnblogs.com/weiqt/articles/4022399.html
datagrid的扩展方法，用于将当前的数据生成excel需要的内容。
1 <script>
2 /**
3 Jquery easyui datagrid js导出excel
4 修改自extgrid导出excel
5 * allows for downloading of grid data (store) directly into excel
6 * Method: extracts data of gridPanel store, uses columnModel to construct XML excel document,
7 * converts to Base64, then loads everything into a data URL link.
8 *
9 * @author Animal <extjs support team>
10 *
11 */
12 $.extend($.fn.datagrid.methods, {
13 getExcelXml: function (jq, param) {
14 var worksheet = this.createWorksheet(jq, param);
15 //alert($(jq).datagrid('getColumnFields'));
16 var totalWidth = 0;
17 var cfs = $(jq).datagrid('getColumnFields');
18 for (var i = 1; i < cfs.length; i++) {
19 totalWidth += $(jq).datagrid('getColumnOption', cfs[i]).width;
20 }
21 //var totalWidth = this.getColumnModel().getTotalWidth(includeHidden);
22 return '<?xml version="1.0" encoding="utf-8"?>' +//xml申明有问题，以修正，注意是utf-8编码，如果是gb2312，需要修改动态页文件的写入编码
23 '<ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:o="urn:schemas-microsoft-com:office:office">' +
24 '<o:DocumentProperties><o:Title>' + param.title + '</o:Title></o:DocumentProperties>' +
25 '<ss:ExcelWorkbook>' +
26 '<ss:WindowHeight>' + worksheet.height + '</ss:WindowHeight>' +
27 '<ss:WindowWidth>' + worksheet.width + '</ss:WindowWidth>' +
28 '<ss:ProtectStructure>False</ss:ProtectStructure>' +
29 '<ss:ProtectWindows>False</ss:ProtectWindows>' +
30 '</ss:ExcelWorkbook>' +
31 '<ss:Styles>' +
32 '<ss:Style ss:ID="Default">' +
33 '<ss:Alignment ss:Vertical="Top" />' +
34 '<ss:Font ss:FontName="arial" ss:Size="10" />' +
35 '<ss:Borders>' +
36 '<ss:Border ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Top" />' +
37 '<ss:Border ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Bottom" />' +
38 '<ss:Border ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Left" />' +
39 '<ss:Border ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Right" />' +
40 '</ss:Borders>' +
41 '<ss:Interior />' +
42 '<ss:NumberFormat />' +
43 '<ss:Protection />' +
44 '</ss:Style>' +
45 '<ss:Style ss:ID="title">' +
46 '<ss:Borders />' +
47 '<ss:Font />' +
48 '<ss:Alignment ss:Vertical="Center" ss:Horizontal="Center" />' +
49 '<ss:NumberFormat ss:Format="@" />' +
50 '</ss:Style>' +
51 '<ss:Style ss:ID="headercell">' +
52 '<ss:Font ss:Bold="1" ss:Size="10" />' +
53 '<ss:Alignment ss:Horizontal="Center" />' +
54 '<ss:Interior ss:Pattern="Solid" />' +
55 '</ss:Style>' +
56 '<ss:Style ss:ID="even">' +
57 '<ss:Interior ss:Pattern="Solid" />' +
58 '</ss:Style>' +
59 '<ss:Style ss:Parent="even" ss:ID="evendate">' +
60 '<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
61 '</ss:Style>' +
62 '<ss:Style ss:Parent="even" ss:ID="evenint">' +
63 '<ss:NumberFormat ss:Format="0" />' +
64 '</ss:Style>' +
65 '<ss:Style ss:Parent="even" ss:ID="evenfloat">' +
66 '<ss:NumberFormat ss:Format="0.00" />' +
67 '</ss:Style>' +
68 '<ss:Style ss:ID="odd">' +
69 '<ss:Interior ss:Pattern="Solid" />' +
70 '</ss:Style>' +
71 '<ss:Style ss:Parent="odd" ss:ID="odddate">' +
72 '<ss:NumberFormat ss:Format="yyyy-mm-dd" />' +
73 '</ss:Style>' +
74 '<ss:Style ss:Parent="odd" ss:ID="oddint">' +
75 '<ss:NumberFormat ss:Format="0" />' +
76 '</ss:Style>' +
77 '<ss:Style ss:Parent="odd" ss:ID="oddfloat">' +
78 '<ss:NumberFormat ss:Format="0.00" />' +
79 '</ss:Style>' +
80 '</ss:Styles>' +
81 worksheet.xml +
82 '</ss:Workbook>';
83 },
84 createWorksheet: function (jq, param) {
85 // Calculate cell data types and extra class names which affect formatting
86 var cellType = [];
87 var cellTypeClass = [];
88 //var cm = this.getColumnModel();
89 var totalWidthInPixels = 0;
90 var colXml = '';
91 var headerXml = '';
92 var visibleColumnCountReduction = 0;
93 var cfs = $(jq).datagrid('getColumnFields');
94 var colCount = cfs.length;
95 for (var i = 1; i < colCount; i++) {
96 if (cfs[i] != '') {
97 var w = $(jq).datagrid('getColumnOption', cfs[i]).width;
98 totalWidthInPixels += w;
99 if (cfs[i] === "") {
100 cellType.push("None");
101 cellTypeClass.push("");
102 ++visibleColumnCountReduction;
103 }
104 else {
105 colXml += '<ss:Column ss:AutoFitWidth="1" ss:Width="130" />';
106 headerXml += '<ss:Cell ss:StyleID="headercell">' +
107 '<ss:Data ss:Type="String">' + $(jq).datagrid('getColumnOption', cfs[i]).title + '</ss:Data>' +
108 '<ss:NamedCell ss:Name="Print_Titles" /></ss:Cell>';
109 cellType.push("String");
110 cellTypeClass.push("");
111 }
112 }
113 }
114 var visibleColumnCount = cellType.length - visibleColumnCountReduction;
115 var result = {
116 height: 9000,
117 width: Math.floor(totalWidthInPixels * 30) + 50
118 };
119 var rows = $(jq).datagrid('getRows');
120 // Generate worksheet header details.
121 var t = '<ss:Worksheet ss:Name="' + param.title + '">' +
122 '<ss:Names>' +
123 '<ss:NamedRange ss:Name="Print_Titles" ss:RefersTo="=\'' + param.title + '\'!R1:R2" />' +
124 '</ss:Names>' +
125 '<ss:Table x:FullRows="1" x:FullColumns="1"' +
126 ' ss:ExpandedColumnCount="' + (visibleColumnCount + 2) +
127 '" ss:ExpandedRowCount="' + (rows.length + 2) + '">' +
128 colXml +
129 '<ss:Row ss:AutoFitHeight="1">' +
130 headerXml +
131 '</ss:Row>';
132 // Generate the data rows from the data in the Store
133 //for (var i = 0, it = this.store.data.items, l = it.length; i < l; i++) {
134 for (var i = 0, it = rows, l = it.length; i < l; i++) {
135 t += '<ss:Row>';
136 var cellClass = (i & 1) ? 'odd' : 'even';
137 r = it[i];
138 var k = 0;
139 for (var j = 1; j < colCount; j++) {
140 //if ((cm.getDataIndex(j) != '')
141 if (cfs[j] != '') {
142 //var v = r[cm.getDataIndex(j)];
143 var v = r[cfs[j]];
144 if (cellType[k] !== "None") {
145 t += '<ss:Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><ss:Data ss:Type="' + cellType[k] + '">';
146 if (cellType[k] == 'DateTime') {
147 t += v.format('Y-m-d');
148 } else {
149 t += v;
150 }
151 t += '</ss:Data></ss:Cell>';
152 }
153 k++;
154 }
155 }
156 t += '</ss:Row>';
157 }
158 result.xml = t + '</ss:Table>' +
159 '<x:WorksheetOptions>' +
160 '<x:PageSetup>' +
161 '<x:Layout x:CenterHorizontal="1" x:Orientation="Landscape" />' +
162 '<x:Footer x:Data="Page &P of &N" x:Margin="0.5" />' +
163 '<x:PageMargins x:Top="0.5" x:Right="0.5" x:Left="0.5" x:Bottom="0.8" />' +
164 '</x:PageSetup>' +
165 '<x:FitToPage />' +
166 '<x:Print>' +
167 '<x:PrintErrors>Blank</x:PrintErrors>' +
168 '<x:FitWidth>1</x:FitWidth>' +
169 '<x:FitHeight>32767</x:FitHeight>' +
170 '<x:ValidPrinterInfo />' +
171 '<x:VerticalResolution>600</x:VerticalResolution>' +
172 '</x:Print>' +
173 '<x:Selected />' +
174 '<x:DoNotDisplayGridlines />' +
175 '<x:ProtectObjects>False</x:ProtectObjects>' +
176 '<x:ProtectScenarios>False</x:ProtectScenarios>' +
177 '</x:WorksheetOptions>' +
178 '</ss:Worksheet>';
179 return result;
180 }
181 });
182 </script>
Html:
1 <div style="margin-bottom:5px" id="tb">
2 <a href="#" class="easyui-linkbutton" onclick="return Save_Excel()" iconCls="icon-save" plain="true" title="导出excel文件"></a>
3 </div>
4 <table id="dg"></table>
5 <script>
6 function Save_Excel() {//导出Excel文件
7 //getExcelXML有一个JSON对象的配置，配置项看了下只有title配置，为excel文档的标题
8 var data = $('#dg').datagrid('getExcelXml', { title: 'datagrid import to excel' }); //获取datagrid数据对应的excel需要的xml格式的内容
9 //用ajax发动到动态页动态写入xls文件中
10 var url = 'datagrid-to-excel.ashx'; //如果为asp注意修改后缀
11 $.ajax({ url: url, data: { data: data }, type: 'POST', dataType: 'text',
12 success: function (fn) {
13 alert('导出excel成功！');
14 window.location = fn; //执行下载操作
15 },
16 error: function (xhr) {
17 alert('动态页有问题\nstatus：' + xhr.status + '\nresponseText：' + xhr.responseText)
18 }
19 });
20 return false;
21 }
22 $(function () {
23 $('#dg').datagrid({
24 singleSelect: true,
25 toolbar:'#tb',
26 url: 'product.json',
27 fitColumns: true, pagination: true, pageSize: 3,
28 title: 'easyui datagrid数据导出excel文件示例',
29 width: 400,
30 height: 300,
31 columns: [[{ field: 'itemid', width: 80, title: 'Item ID' },
32 { field: 'productname', width: 100, editor: 'text', title: 'Product Name' },
33 { field: 'listprice', width: 80, align: 'right', title: 'List Pirce' },
34 { field: 'unitcost', width: 80, align: 'right', title: 'Unit Cost'}]]
35 });
36 });
37 </script>
asp.net后台代码
1 <%@ WebHandler Language="C#" class="datagrid_to_excel" %>
2
3 using System;
4 using System.Web;
5 using System.IO;
6 using System.Text;
7 public class datagrid_to_excel : IHttpHandler
8 {
9 public void ProcessRequest(HttpContext context)
10 {
11 string fn = DateTime.Now.ToString("yyyyMMddHHmmssfff") + ".xls";
12 string data = context.Request.Form["data"];
13 File.WriteAllText(context.Server.MapPath(fn), data, Encoding.UTF8);//如果是gb2312的xml申明，第三个编码参数修改为Encoding.GetEncoding(936)
14
15 context.Response.Write(fn);//返回文件名提供下载
16 }
17 public bool IsReusable {
18 get {
19 return false;
20 }
21 }
22
23 }
效果图
注意：如果在使用中报“从客户端(exportContent="<xml version="1.0" e...")中检测到有潜在危险的 Request.Form 值。”，需要修改一下webconfig文件
在Web.Config文件中的配置节</system.web>之前加上如下一句配置就可以了
<httpRuntime requestValidationMode="2.0" />
Jquery easyui datagrid 导出Excel的更多相关文章
- easyui datagrid导出excel
[第十四篇]easyui datagrid导出excel <a class="btn btn-app" onclick="exportExcel()" ...
- 【第十四篇】easyui datagrid导出excel
<a class="btn btn-app" onclick="exportExcel()"><i class="fa fa-edi ...
- asp.net (jquery easy-ui datagrid)通用Excel文件导出（NPOI）
http://www.cnblogs.com/datacool/archive/2013/03/12/easy-ui_datagrid_export_excel_asp_net.html
- MVC项目中怎样用JS导出EasyUI DataGrid为Excel
在做一中考评项目的时候,遇到了这么一个需求.就是把评教后得到的老师的成绩导出为Excel.事实上需求非常普通.实现起来有些复杂.由于老师考评不但有固定的考核项,还有额外加分项.于是我们就抽出来了一个表 ...
- 浅谈jQuery easyui datagrid操作单元格样式
今天项目上遇到问题,就是表格风格统一的问题,由于用了2个不同的框架,所以如果要大修比较麻烦,考虑到修改表格样式工作量会少很多,所以考虑修改jQuery easyui datagrid数据网格的样式. ...
- jQuery EasyUI datagrid实现本地分页的方法
http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
- jquery easyui datagrid使用参考
jquery easyui datagrid使用参考 创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...
- jquery easyui datagrid 获取Checked选择行(勾选行)数据
原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...
随机推荐
- Android 随想录之 Android 系统架构
应用层(Application) Android 的应用层由运行在 Android 设备上的所有应用程序共同构成(系统预装程序以及第三方应用程序). 系统预装应用程序包含拨号软件.短信.联系人.邮件客 ...
- Java 文件IO续
文件IO续 File类 用来将文件和文件夹封装成对象 方便对文件和文件夹的属性信息进行操作 File对象可以作为参数传递给流的构造函数 Demo1 File的构造方法 public cla ...
- composer 安装yii插件 fontawesome
国外站点 http://fontawesome.io/ 国内站点 http://fontawesome.dashgame.com/ Installation The preferred way to ...
- PHP的UTF-8中文转拼音处理类（性能已优化至极致）
<?php /** * PHP 汉字转拼音 * @author Jerryli(hzjerry@gmail.com) * @version V0.20140715 * @package SPFW ...
- opencl 学习资源
1.AMD opencl-optimization-guide http://developer.amd.com/tools-and-sdks/opencl-zone/amd-accelerated ...
- mysql下sql语句 update 字段=字段+字符串
mysql下sql语句 update 字段=字段+字符串 mysql下sql语句令某字段值等于原值加上一个字符串 update 表明 SET 字段= 'feifei' || 字段; (postgr ...
- virtualBox虚拟机安装与主机互访和实现上网配置
1.到官方网下载vitualBox虚拟机,目前最新版本5.0,并安装. https://www.virtualbox.org/ 2.下载安装CentOS系统安装文件 本文采用CentOS-6.5-i3 ...
- java static 关键字
static 修饰成员函数:(静态函数) 1)静态函数可以用类名和对象进行调用. 2)直接访问静态成员,但不能访问非静态成员变量. 3)非静态函数可以直接访问静态与非静态的成员.(非静态函数只能由对象 ...
- python核心编程第六章练习6-8
6-8.列表.给出一个整型值,返回代表该值得英文,比如输入89会返回“eight-nine”.附加题:能够返回符合英文语法规律的新式,比如输入89会返回“eighty-nine”.本练习中的值假定在0 ...
- Java substring() 方法
Java String类 substring() 方法返回字符串的子字符串. 语法 public String substring(int beginIndex) 或 public String su ...