大体介绍一下，前后端完全分离。前端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='重新生成' οnclick=changeColum('" + gridid + "') />\
<input type='button' value='Excel预览' οnclick=Excelyulan('" + gridid + "') />\
<input type='button' value='导出Excel' οnclick=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' οnclick='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下支持
若有什么问题，欢迎提问和建议
1369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
