Easy UI DataGrid 导出Excel表格
2015-09-02 13:54
465 查看
大体介绍一下,前后端完全分离。前端html5,后台用的asp.net的一般处理程序。
自己写了一个单独的js来实现报表的导出,因为客户对于报表的样式要求不是很高,所以做成这样基本够用了。
接下来贴代码:
1.html页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../js/jquery.min.js"></script> <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script> <script type="text/javascript" src="../../js/DataGridExcel.js"></script> <link rel="stylesheet" href="../../fontas/css/font-awesome.css" /> <script> $(function() { initgrid(); }) function initgrid() { $('#easyui_grid').datagrid({ // title: '应用系统列表', // iconCls: 'icon-edit', //图标 height: 'auto', striped: true, border: true, collapsible: true, //是否可折叠的 // width:function(){return document.body.clientWidth*0.9}, // fit: true, //自动大小 url: "../bagl/qjsp.aspx?Requesttype=loadWygsall", method: 'get', pageSize: 10, //sortName: 'code', //sortOrder: 'desc', remoteSort: false, idField: "POGuid", singleSelect: true, //是否单选 pagination: true, //分页控件 rownumbers: false, //行号 fitColumns: true, nowrap: false, onLoadSuccess: function(Data) { initExcelcolum("easyui_grid", "../../commonservices/ReportController.ashx?requestType=ExportExcel"); $("#colums_father").panel({ title: "显示及打印属性设置", collapsible: true }) } }); //设置分页控件 var p = $('#easyui_grid').datagrid('getPager'); $(p).pagination({ pageSize: 10, //每页显示的记录条数,默认为10 pageList: [10, 20, 50, 100, 500], //可以设置每页记录条数的列表 beforePageText: '第', //页数文本框前显示的汉字 afterPageText: '页 共 {pages} 页', displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录' }); } </script> </head> <body> <div id="colums_father" style="width: 100%;"> </div> <table id="easyui_grid"> <thead> <th align="center" field="ProOrgName" width="10%">公司名称</th> <th align="center" field="ProOrgNO" width="10%" data-options="hidden:true">公司编号</th> <th align="center" field="Address" width="10%">公司地址</th> <th align="center" field="CerNo" width="10%" data-options="hidden:true">注册编号</th> <th align="center" field="RegDate" width="10%">注册时间</th> <th align="center" field="RegAddress" width="10%">注册地点</th> <th align="center" field="JobAddress" width="10%">办公地点</th> <th align="center" field="zglgm" width="10%">总管理规模</th> <th align="center" field="QuaName" width="5%">资质等级</th> <th align="center" field="HouseBureauName" width="10%" data-options="hidden:true">主管部门</th> <th align="center" field="RegionName" width="10%" data-options="hidden:true">所在行政区</th> <th align="center" field="frname" width="10%">法人</th> <th align="center" field="fzrname" width="10%">负责人</th> <th align="center" field="State" width="10%" data-options="fitColumns:true,nowrap:false" >状态</th> </thead> </table> <div id="ExcelWin" class="easyui-window" title="打印预览" style="width:100%;height:500px;" data-options="iconCls:'icon-save',modal:true,closed:true"> <div id="ExcelWin_content"></div> </div> </body> </html>
2.DataGridExcel.js
var excelthsize = 18, exceltdsize = 15; function initExcelcolum(gridid, urls) { var extitlehtml = "<tr style='font-weight:bold;'><td>列名</td>", exstatehtml = "<tr><td style='font-weight:bold;'>显示</td>", exwidthhtml = "<tr><td style='font-weight:bold;'>列宽</td>", exjichuhtml = "<tr><td style='font-weight:bold;'>基础</td>"; var grid = $("#" + gridid); var columns = grid.datagrid("options").columns[0]; // 得到columns对象 var colhtml = ""; exjichuhtml += "<td align='center' colspan='" + columns.length + "'>Excel名称:<input type='text' \ style='width:150px;border-color:#95B8E7;border-radius: 5px;border-style:solid;border-width: 1px;' \ value='Excel导出-" + new Date().toLocaleString() + "' id='excelName'/> \ 标题文字大小:<input type='text' \ style='width:20px;border-color:#95B8E7;border-radius: 5px;border-style:solid;border-width: 1px;' \ value='" + excelthsize + "' id='excelthsize'/>px \ 普通行文字大小:<input type='text' \ style='width:20px;border-color:#95B8E7;border-radius: 5px;border-style:solid;border-width: 1px;' \ value='" + exceltdsize + "' id='exceltdsize'/>px \ </td></tr>"; var exbuttonhtml = "<tr><td align='center' colspan='" + (columns.length + 1) + "'>\ <input type='button' value='重新生成' onclick=changeColum('" + gridid + "') />\ <input type='button' value='Excel预览' onclick=Excelyulan('" + gridid + "') />\ <input type='button' value='导出Excel' onclick=daochuExcel('" + gridid + "','" + urls + "') /></td></tr>" for (var i = 0; i < columns.length; i++) { var checkstr = columns[i].hidden ? "" : "checked"; extitlehtml += "<td align='center'>" + columns[i].title + "</td>" exstatehtml += "<td align='center' onclick='Excelcbtdclick(this)'><input class='excelcbstate' type='checkbox' " + checkstr + " value='" + columns[i].field + "'/></td>" exwidthhtml += "<td align='center'><input type='text' name='" + columns[i].field + "' style='width:20px;border-color:#95B8E7;border-radius: 5px;border-style:solid;border-width: 1px;' class='cbwidth' value='" + parseInt(columns[i].width) + "'/>%</td>" } colhtml = "<table border='1' style='border:0px;font-weight:bold;font-size: 13px;font-family: Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;border-collapse: collapse;border-spacing: 0;border-color:#95B8E7;width:100%;'>"; colhtml += exjichuhtml + extitlehtml + exstatehtml + exwidthhtml + exbuttonhtml + "</table>"; $("#colums_father").html(colhtml); $(".excelcbstate").click(function(e) { //阻止checkbox选中事件冒泡 e.stopPropagation(); }) } function ChangeToTable(printDatagrid) { //转换grid为table标签 printData = $("#" + printDatagrid); var tableString = '<table border="1" class="exceltable" style="border-collapse: collapse;border:0px;">'; var frozenColumns = printData.datagrid("options").frozenColumns; // 得到frozenColumns对象 var columns = printData.datagrid("options").columns; // 得到columns对象 var nameList = new Array(); // 载入title if (typeof columns != 'undefined' && columns != '') { $(columns).each(function(index) { tableString += '\n<tr>'; for (var i = 0; i < columns[index].length; ++i) { if (!columns[index][i].hidden) { var width = columns[index][i].width; if (width.indexOf("%") > 0) { width = (window.screen.availWidth - 100) * parseInt(width) / 100; } tableString += '\n<th width="' + width + '"'; if (typeof columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) { tableString += ' rowspan="' + columns[index][i].rowspan + '"'; } if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) { tableString += ' colspan="' + columns[index][i].colspan + '"'; } if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') { nameList.push(columns[index][i]); } tableString += ' style="background-color: #DBDBDB;text-align:center;font-size:' + excelthsize + 'px;" '; tableString += '>' + columns[index][i].title + '</th>'; } } tableString += '\n</tr>'; }); } // 载入内容 var rows = printData.datagrid("getRows"); // 这段代码是获取当前页的所有行 for (var i = 0; i < rows.length; ++i) { tableString += '\n<tr >'; for (var j = 0; j < nameList.length; ++j) { var e = nameList[j].field.lastIndexOf('_0'); tableString += '\n<td style="padding:3px;' + (i % 2 == 1 ? 'background-color:#efefef;' : '') + 'font-size:' + exceltdsize + 'px;'; if (nameList[j].align != undefined && nameList[j].align != '') { tableString += ' text-align:' + nameList[j].align + ';'; } tableString += '" >'; if (e + 2 == nameList[j].field.length) { tableString += rows[i][nameList[j].field.substring(0, e)] == null ? "" : rows[i][nameList[j].field.substring(0, e)]; } else tableString += rows[i][nameList[j].field] == null ? "" : rows[i][nameList[j].field]; tableString += '</td>'; } tableString += '\n</tr>'; } tableString += '\n</table>'; return tableString; } function changeColum(gridid) { //修改列宽和列的显示状态 var grid = $("#" + gridid); var cbs = $("#colums_father").find('.excelcbstate'); exceltdsize = $("#exceltdsize").val(); excelthsize = $("#excelthsize").val(); $.each(cbs, function(index, item) { if (!item.checked) { grid.datagrid("hideColumn", item.value); } else { grid.datagrid("showColumn", item.value); var wid = $(item).parents("table").find("input[name='" + item.value + "']")[0].value grid.datagrid("getColumnOption", item.value).width = wid + "%"; } }); } function Excelyulan(gridid) { //预览 var htmlstr = ChangeToTable(gridid); $("#ExcelWin_content").html(htmlstr) $("#ExcelWin").window("open") } function daochuExcel(gridid, urls) { //导出 var htmlstr = ChangeToTable(gridid); var form = $('<form action="' + urls + '" method="post" id="fm1"></form>'); var txtConent = $('<input type="hidden" id="txtConent" name="txtConent" />'); var txtName = $('<input type="hidden" id="txtName" name="txtName" />'); txtConent.val(htmlstr); txtConent.appendTo(form); txtName.val($("#excelName").val()); txtName.appendTo(form); form.appendTo(document.body).submit(); document.body.removeChild(form); } function Excelcbtdclick(td) { $(td).find(".excelcbstate")[0].checked = $(td).find(".excelcbstate")[0].checked ? false : true; }
3.ReportController
public class ReportController : IHttpHandler { public void ProcessRequest(HttpContext context) { string requestType = context.Request["requestType"]; switch (requestType) { case "ExportExcel": ExportExcel(context); break; default: break; } } public void ExportExcel(HttpContext context) { context.Response.Clear(); context.Response.Buffer = true; context.Response.Charset = "utf-8"; context.Response.ContentEncoding = System.Text.Encoding.UTF8; context.Response.AppendHeader("content-disposition", "attachment;filename=\"" + HttpUtility.HtmlEncode(context.Request["txtName"] ?? DateTime.Now.ToString("yyyyMMdd")) + ".xls\""); context.Response.ContentType = "Application/ms-excel"; context.Response.Write("<html>\n<head></head>\n"); context.Response.Write("<body>\n" + context.Request["txtConent"] + "\n</body>\n</html>"); context.Response.Flush(); context.Response.End(); } public bool IsReusable { get { return false; } }
ok,大概介绍一下,主要注重在前端,分为3个模块,初始化datagrid,初始化excel设置功能,生成导出标签。
导出的流程并不麻烦,主要是将datagrid的界面转换为table标签,后台将这些标签拼接成一个完整的html页面输出就可以了。
如果想直接在网页打印,可以用windows.print()方法来输出生成的标签,ie下支持
若有什么问题,欢迎提问和建议
相关文章推荐
- EasyUI-datagrid分页查询前端显示
- leetcode笔记:Permutation Sequence
- UI:target-action设计模式、手势识别器
- Algorithms—96.Unique Binary Search Trees
- 怎么入门iOS之OC_UI晋级学什么、
- [LeetCode]N-Queens II
- UML建模之时序图(Sequence Diagram)
- Android的线程使用来更新UI----Thread、Handler、Looper、TimerTask等
- Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI
- Java中字符串探索—-String ,StringBuffer ,StringBuilder及字符串缓存池
- 转 -- MVC+EF easyui dataGrid 动态加载分页表格
- OS开发UI篇—Quartz2D简单使用
- mosquitto_pub和mosquitto_sub 命令参数说明
- 遍历一个map,从中取得key 和value。不知道key的情况下取value。
- LeetCode "Closest Binary Search Tree Value II"
- PAT-01-复杂度2 Maximum Subsequence Sum
- 改变UISearchBar的文本颜色
- 关于aque.h头文件
- EasyUI中combogrid的使用方法
- UVA 120 Stacks of Flapjacks (STL deque&reverse)