DevExpress开发报表的一些基本知识

最新推荐文章于 2024-06-26 22:24:17 发布

第一段代码

最新推荐文章于 2024-06-26 22:24:17 发布

阅读量2.9k

点赞数 1

分类专栏：项目开发日记

本文链接：https://blog.csdn.net/godot06/article/details/116657980

版权

项目开发日记专栏收录该内容

60 篇文章 5 订阅

订阅专栏

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"/> &nbsp;—&nbsp;
                            <%--<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;
        }