欧美天天射,任你躁77,欧美日韩大陆在线

DevExpress使用心得八：用DevExpress制作水晶報表

轉帖|使用教程|編輯：我只采一朵|2014-07-16 10:16:10.000|閱讀 11882 次

概述：本文介紹了如何使用DevExpress報表控件制作水晶報表的全過程。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

最近在研究 DevExpress 的報表，果然非常強大，它的報表控件和其他專業的報表不相上下，于是想用它做一個水晶報表，順便也提升一下自己的實踐能力。下面就將整個過程寫出來分享給大家：

添加報表

1、啟動 Visual Studio (2008或者2010)。創建項目(由于我用的是MVC，所以此處也以MVC為例)

2、添加Report文件夾，右鍵添加數據集TestReport，步驟如下：

然后再在服務器資源管理器添加服務器連接，然后選擇你所需要的數據庫，從其中拖拽出你所要的數據源對象，如圖：

添加從表

3、接著添加你所需要的從表，TestDetailReport，如圖：

添加完，系統會自己將 Devexpress 相關的引用加進來，打開TestDetailReport從表，如下：

接著綁定你所需要的數據源，左上角的Report Tasks。

然后，使用右上角的Field List：

其中testStorage1是你剛所加的數據源，Parameters我們可以在其中添加所需參數：

設計從表頁面

要注意要把Modifiers的屬性設為Public。接下來可以做從表頁面了。工具箱里的Report Contorls有設計報表的各種控件：

這里我們先用XRTable,只需把它拖拽到Detail中,可以自行設計。效果如下：

要綁定的數據直接從Field List中拉出來。在Report Task中有個屬性 FilterString，使用它可以加入我們的過濾條件。其中？TaskId是我們剛手動在Parameters所添加的參數。

這樣從表就設計完成了，然后我們可以在PreView中預覽，如果你添加的參數就傳入你的參數就可以看到效果了。

添加主表

4、接下來我們就制作所需的主表，Master。重復第三步操作，像Report 中添加TestMasterReport主表。然后雙擊打開，從Report Controls中拖入XRsubReport控件到Dtail中。如圖：

接著，我們為XRSubreport 控件綁定數據源，也就是我們剛才所做的從表。進入屬性頁，選擇ReporSource 屬性進行綁定，如果綁定不上，就重新生成一下就OK了。

然后，Detail上面的部分就相當于表頭，在表頭部分我們如果有數據也是需要從數據庫中來的，那就重復上面的操作。先給主表綁定數據源，然后同樣在 Field List中給它設置參數，比如就叫_TaskId (在上面設計從表時我們也給過參數，TaskId)。同樣，也可以設置過濾條件，這里就不一一重復了。

這樣主表就也差不多完成了，然后，我們選擇預覽：

其中_TaskId是我們在設計主表(Master)時，給的參數。TaskId是我們在設計從表(Detail)是給的參數。到這里報表就算設計完成了。然后，接下來是代碼部分。

添加控制器

5、添加控制器 ReportController，在其中添加三個操作方法：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DevExpress.Web;
using DevExpress.XtraReports.Web;
using DevExpress.XtraReports;
using GYS.Infrastructure.CommonHelper;
using GYS.WMS.Report.Report;


    public ActionResult Index()
        {
            Guid TaskId = ConverterHelper.ObjectToGuidValue(Request.QueryString["TaskId"]);
            Session["TaskId"] = TaskId;
            ViewData["Report"] = new TestMasterReportcs();
            return View();
        }


    public ActionResult DocumentViewerPartial()
        {
            var report = new TestMasterReportcs();
            report._TaskId.Value = Session["TaskId"];
            report.FillDataSource();
            report.ApplyFiltering();
            ViewData["Report"] = report;
            return PartialView("DocumentViewerPartial");
        }


    public ActionResult ExportDocumentViewer()
        {
            var report = new TestMasterReportcs();
            report._TaskId.Value = Session["TaskId"];
            report.FillDataSource();
            report.ApplyFiltering();
            return DevExpress.Web.Mvc.DocumentViewerExtension.ExportTo(report);
        }

上面三個方法也很簡單：

其中Index ,我們首先得到所需的參數 TaskId,然后把它存入了Session 中，接著我們實例了主表TestMasterReport 。然后下面兩個方法，首先從Session 中把參數取出來，把它賦給主表所設置的參數，在調用兩個方法。

生成視圖

6、然后，生成相應的視圖，Index 和 DocumentViewerPartial

這是Index 視圖：

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript"></script>
</head>
<body>
    <div>
        @Html.DevExpress().GetStyleSheets(
        new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
        new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },
        new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor },
        new StyleSheet { ExtensionSuite = ExtensionSuite.GridView },
        new StyleSheet { ExtensionSuite = ExtensionSuite.PivotGrid },
        new StyleSheet { ExtensionSuite = ExtensionSuite.Chart },
        new StyleSheet { ExtensionSuite = ExtensionSuite.Report },
        new StyleSheet { ExtensionSuite = ExtensionSuite.Scheduler },
        new StyleSheet { ExtensionSuite = ExtensionSuite.TreeList }
    )

        @Html.DevExpress().GetScripts(
        new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
        new Script { ExtensionSuite = ExtensionSuite.HtmlEditor },
        new Script { ExtensionSuite = ExtensionSuite.GridView },
        new Script { ExtensionSuite = ExtensionSuite.PivotGrid },
        new Script { ExtensionSuite = ExtensionSuite.Editors },
        new Script { ExtensionSuite = ExtensionSuite.Chart },
        new Script { ExtensionSuite = ExtensionSuite.Report },
        new Script { ExtensionSuite = ExtensionSuite.Scheduler },
        new Script { ExtensionSuite = ExtensionSuite.TreeList }
    )

    @Html.Partial("DocumentViewerPartial");
    </div>
</body>
</html>

DocumentViewerPartial 視圖：

@Html.DevExpress().DocumentViewer(settings =>{
    // The following settings are required for a Report Viewer.
    settings.Name = "documentViewer1";
    settings.Report = (TestMasterReportcs)ViewData["Report"];
    settings.SettingsSplitter.RightPaneVisible = false;
   
    // Callback and export route values specify corresponding controllers and their actions.
    // These settings are required as well.
    settings.CallbackRouteValues = new { Controller = "Report", Action = "DocumentViewerPartial" };
    settings.ExportRouteValues = new { Controller = "Report", Action = "ExportDocumentViewer" };
}).GetHtml();

添加打印

7、最后，基本差不多了，但是還差一個打印的方法。我們回到TestMasterReport 主表，給XRSubReport 綁定一個事件，BeforrePrint 打印用的。

雙擊Detail_BeforePrint 這個打印方法：

  private void Detail_BeforePrint(object sender, System.Drawing.Printing.PrintEventArgs e)
    {
        var detailReport = _Subreport.ReportSource as TestDetailReport;
        detailReport.TaskId.Value = this._TaskId.Value;
        detailReport.FillDataSource();
        detailReport.ApplyFiltering();
    }

其中的代碼如上，_Subreport 是TestMasterReport 主表的名稱，通過它打點調出從表的數據源，轉換成從表 TestDetailReport，然后TaskId是我們給從表要傳入的參數，剛才我們已經給 TestMasterReport _TaskId 賦過值了，所以現在可以直接把_TaskId 的值給 TaskId,同樣調用兩個方法，就完成了。

運行起來，效果如下：