ASP项目中使用DevExpress开发出的报表确实比较强大和灵活,使用起来也比较简单,项目中也经常用到,有时候,隔了很久不用,也容易忘记操作,遂记录报表开发如下:
1.安装DevExpress
参考:Devexpress 14.1安装记录
DevExpress安装好之后,在VS控制栏上,会多出一个DevExpress功能插件,即意味可以直接建DevExpress报表等了
2.项目添加引用
安装完后,再开始建之前,我们先需要给我们的项目添加引用,如果是ASP报表,我们需要添加以下两个引用文件:
这两个,在DevExpress安装目录bin/framework下,默认安装路径参考:C:\Program Files (x86)\DevExpress 14.1\Components\Bin\Framework\..
添加引用的方式很简单,只需要在VS的引用右键,添加应用,选择 浏览 ,找到安装路径下的bin/framework,选择到截图中两个文件.dll,文件比较多,可以借助搜索筛选
3.新建报表
在ASP项目中新建报表,一般需要四个文件:
(1)ReportList.aspx 前端静态网页,为报表未生成的触发显示文件
(2)ReportList.js 报表触发文件对应的js文件,主要任务:一是根据需求完成对ReportList.aspx文件数据的渲染和处理;二是触发报表的生成;
(3)ReportShow.aspx 主要用于DevExpress报表样式文件,完成DevExpress报表的一些基本配置,如报表按钮/保存等一些属性配置,类似清单文件;但是关键的地方在于这个文件ReportShow.aspx.cs下完成了向后端数据发起请求的操作,得到报表数据,用于第四个文件的数据绑定.
(4)ReportShow.cs 这个才是DevExpress报表的核心,里面要完成报表格式的设计和数据绑定.
上次四个文件,从用户请求发表的角度看,其执行顺序也基本从1-4.
3.1 ReportList.aspx 前端静态网页交互界面
完成条件筛选,发起报表等操作,基本没有什么需要注意地方,唯一需要注意的就是需要指定相应的处理js文件
页面参考代码:
这个页面效果路上,主要完成前端交互页面显示和报表触发,然后关键的地方就是需要绑定对应的js处理入口
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CompanyReport.aspx.cs" Inherits="FunnyPig.BookReport.CompanyReport" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" href="/UIAdmin/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="/UIAdmin/style/admin.css" media="all" />
</head>
<body>
<div class="layui-fluid">
<div class="layui-card layui-row layui-col-space15">
<div class="layui-col-xs12 layui-col-md12">
<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="lay-admin">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">接单时间:</label>
<input type="text" name="startTime" id="startTime" placeholder="请选择起始时间" autocomplete="off" class="layui-input layui-input-inline"/> —
<%--<input type="text" id="placeid" name="placeid" class="layui-hide" value="0"/>--%>
</div>
<div class="layui-inline">
<input type="text" name="endTime" id="endTime" placeholder="请选择结束时间" autocomplete="off" class="layui-input layui-input-inline"/>
</div>
<div class="layui-inline">
<button class="layui-btn layuiadmin-btn layui-btn-normal" id="searchBtn">
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
</button>
<input id="btnClose" type="button" value="button" class="layui-hide" onclick="loadClose()" />
</div>
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<iframe id="conFrame" name="conFrame" style="width: 100%;" scrolling="no" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
<script src="/UIAdmin/layui/layui.js"></script>
<script>
layui.config({
base: '/UIAdmin/' //静态资源所在路径
, version: true
}).extend({
index: 'lib/index', //主入口模块
CompanyReportMod: '{/}/SmartPension/BookReport/CompanyReportMod'//每日报表入口模块
}).use(['index', 'CompanyReportMod'], function () {
var CompanyReportMod = layui.CompanyReportMod;
CompanyReportMod.init();
});
</script>
</body>
</html>3.2 ReportList.js 报表入口响应入口
这里主要完成了:
(1)完成上面交互页面的一些处理,如渲染一些数据,或者处理一些请求参数,用于请求报表数据查询;
(2)这里还有一个关键就是触发Dev报表生成入口,指定了报表生成的入口文件;
layui.extend({
comm: '{/}/UIAdmin/lib/CommonFunction'
});
layui.define(['index', 'comm', 'laydate', 'jquery', 'ztree', 'form', 'layer'], function (exports) {
var $ = layui.jquery
, form = layui.form
, ztree = layui.ztree
, layer = layui.layer
, laydate = layui.laydate
, comm = layui.comm;
/**获取近N天*/
function getRecentDay(day) {
var today = new Date();
var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
today.setTime(targetday_milliseconds);
var tYear = today.getFullYear();
var tMonth = today.getMonth();
var tDate = today.getDate();
tMonth = doHandleMonth(tMonth + 1);
tDate = doHandleMonth(tDate);
return tYear + "-" + tMonth + "-" + tDate;
}
function doHandleMonth(month) {
var m = month;
if (month.toString().length == 1) {
m = "0" + month;
}
return m;
}
laydate.render({
elem: '#startTime'
, type: 'date'
, value: getRecentDay(-30)
});
laydate.render({
elem: '#endTime'
, type: 'date'
, value: new Date()
});
var index;
var ifm = document.getElementById("conFrame");
ifm.height = document.documentElement.clientHeight - 118;
var obj = {
init: function () {
this.queryReg();//初始化列表数据
},
queryReg: function () {
$("#searchBtn").click(function () {
index = layer.msg('报表生成中，请稍后...', { icon: 16, time: false, shade: 0.3 });
var url = "CompanyReportShow.aspx?jsonData="; // 指定报表生成的入口文件
var parms = form.val("lay-admin");
console.log(parms);
url += JSON.stringify(parms); // 构建了数据请求条件参数
$("#conFrame").attr("src", url);
});
}
}
window.loadClose = function () {
layer.close(index);
}
exports('CompanyReportMod', obj);
})3.3 ReportShow.aspx 清单配置 + 数据请求
(1)主要用于DevExpress报表样式文件,完成DevExpress报表的一些基本配置,如报表按钮/保存等一些属性配置,类似清单文件;
(2)关键的地方在于这个文件ReportShow.aspx.cs下完成了向后端数据发起请求的操作,得到报表数据,用于第四个文件的数据绑定.
清单配置代码,这个基本可以复制,没有特别额外要注意的:
<%@ Register Assembly="DevExpress.XtraReports.v14.1.Web, Version=14.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.XtraReports.Web" TagPrefix="dx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="/UIAdmin/layui/layui.js"></script>
<script>
layui.config({
base: '/UIAdmin/' //静态资源所在路径
, version: true
}).extend({
index: 'lib/index'//主入口模块
}).use(['index', 'jquery'], function () {
var $ = layui.jquery;
$("#btnClose", parent.document).click();
});
</script>
</head>
<body style="height:100%;margin:0px;padding:0px">
<form id="form1" runat="server" style="height:100%">
<div style="width:100%;height:100%">
<dx:ASPxDocumentViewer ID="ASPxDocumentViewer1" runat="server" Theme="DevEx" Height="100%">
<SettingsReportViewer PageByPage="true" />
<ToolbarItems>
<dx:ReportToolbarButton ItemKind="PrintReport" ToolTip="打印" />
<dx:ReportToolbarSeparator />
<dx:ReportToolbarButton Enabled="False" ItemKind="FirstPage" ToolTip="第一页"/>
<dx:ReportToolbarButton Enabled="False" ItemKind="PreviousPage" ToolTip="上一页" />
<dx:ReportToolbarLabel ItemKind="PageLabel" Text="第：" />
<dx:ReportToolbarComboBox ItemKind="PageNumber" Width="65px">
</dx:ReportToolbarComboBox>
<dx:ReportToolbarLabel ItemKind="OfLabel" Text="页 共：" />
<dx:ReportToolbarTextBox ItemKind="PageCount" />
<dx:ReportToolbarButton ItemKind="NextPage" ToolTip="下一页" />
<dx:ReportToolbarButton ItemKind="LastPage" ToolTip="最后一页" />
<dx:ReportToolbarSeparator />
<dx:ReportToolbarButton ItemKind="SaveToDisk" ToolTip="保存" />
<dx:ReportToolbarComboBox ItemKind="SaveFormat" Width="70px">
<Elements>
<dx:ListElement Value="xls" Text="EXCEL" />
<dx:ListElement Value="xlsx" Text="EXCEL 2010" />
<dx:ListElement Value="rtf" Text="WORD" />
<dx:ListElement Value="pdf" Text="PDF" />
<dx:ListElement Value="png" Text="图片" />
</Elements>
</dx:ReportToolbarComboBox>
</ToolbarItems>
</dx:ASPxDocumentViewer>
</div>
</form>
</body>
</html>ReportShow.aspx.cs 完成向后端数据请求,并且指定了对应devexpress报表渲染文件,这样第四步中的报表就有相应的数据进行绑定了.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ViewState["dt"] = getData();
}
ReportShow p = new ReportShow (); // 绑定的报表对象的数据
JObject jobj = JObject.Parse(Request["jsonData"]);
p.DataSource = ViewState["dt"] as DataTable;
this.ASPxDocumentViewer1.Report = p;
}
private DataTable getData()
{
DataTable dt = new DataTable();
JObject jobj = JObject.Parse(Request["jsonData"]);
string strsql = "exec companyOrderReport @timeStart,@timeEnd";
SqlCommand cmd = new SqlCommand(strsql);
string startTime = "";
string endTime = "";
if (!string.IsNullOrEmpty(jobj.Value<string>("startTime")))
{
startTime = jobj.Value<string>("startTime");
}
else
{
startTime = DateTime.Now.AddDays(-1).ToString("yyyy-MM-dd");
}
if (!string.IsNullOrEmpty(jobj.Value<string>("endTime")))
{
endTime = jobj.Value<string>("endTime");
}
else
{
endTime = DateTime.Now.AddDays(1).ToString("yyyy-MM-dd");
}
cmd.Parameters.AddWithValue("@timeStart", startTime);
cmd.Parameters.AddWithValue("@timeEnd", endTime);
dt = King.DataBase.SqlServer.GetDataSet(cmd).Tables[0];
dt.Columns.Add("日期");
foreach (DataRow dr in dt.Rows)
{
dr["日期"] = startTime + "至" + endTime;
}
return dt;
}3.4 ReportShow.cs 报表设计和数据渲染
这个文件新建和其他文件新建不一样,我们需要新建DevExpress报表文件,然后在这个文件中设计报表和绑定数据,具体操作如下:
然后,就是做表格了,点开左边的工具,选择XRLabel或者XRTable
如果表格列不够,可以右键insert左右添加列item
表格一般还需要矩形居中对齐,边框设计等,
3.5 数据绑定和渲染
如果完成3.4报表的设计,就要给列绑定数据()数据的来源其实在之前那个页面就就已经请求好了,并且里面有一个绑定了一个对应的report)
(1) 设计绑定数据的item
这里需要根据3.3 向后端发请求后获取的数据字段名设计,有多少需要字段就添加多少参数就行.
最后 这就是 报表显示的样子:
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
