如何在網頁報表中創建交互式矩陣
我們已經講解過很多網頁報表的開發技巧了，今天我們講一講如何創建交互式矩陣報表，或者說交叉報表。我們將使用FastReport.Net的xml數據庫。選擇好表格：
添加矩陣（Matrix）對象到數據帶區：
現在在數據窗口中打開“訂單明細”表。你將看到相關聯的表：產品與訂單。打開訂單。它又連接著一張表——員工。我們打開它并將FirstName字段拖到列頭：
雙擊添加的字段。讓我們將LastName字段添加到FirstName字段，以顯示員工的全名。所以，整個字段組成如下所示：
[Order Details.Orders.Employees.FirstName]+" "+[Order Details.Orders.Employees.LastName]
這大幅擴展了列頭。讓我們禁用“自動寬度”功能。要做到這點，請右鍵單擊Matrix對象。然后在上下文菜單中勾選掉“自動尺寸”：
現在你可以自由調整行和列的大小。
將Photo字段拖到列頭。調整單元格大小以適應添加的字段。
現在找到在訂單明細表中找到關聯的產品表。打開它。它也有一張關聯的類別表。將CategoryName字段從類別表中拖動到行頭，并將Picture字段放到同一個單元格。
現在，將“單價”字段從訂單明細表拖到數據單元格中。編輯添加的字段。你需要查找三個字段的產品：單價，數量和單折扣。因此，我們找到真正的銷售額：
[Order Details.UnitPrice] * [Order Details.Quantity] *（decimal）（1 - [Order Details.Discount]）
矩陣幾乎準備就緒，它還有待選擇樣式。右鍵單擊矩陣，然后選擇“樣式”。例如，橙色。這就已經很漂亮了：
在單獨的頁面上創建詳細的報表。在報表中添加第二頁。
將Order Details.OrderDate字段添加到數據帶區。接下來，我們將Order Detail.Products.ProductName字段放在它旁邊。同時拖動字段：Order Detail.UnitPrice、Order Detail.Quantity和Order Detail.Discount。
要顯示所需的員工的數據，你需要過濾表格。我們將傳輸數據以比較第一頁和第二頁。為此，請在第二頁中創建參數。針對這個選項，我們創建了兩個子參數，都是字符串類型：
現在為數據帶添加一個過濾器。雙擊并選擇“過濾器”選項卡：
[Order Details.Orders.Employees.FirstName] + " " + [Order Details.Orders.Employees.LastName] == [Parameters.Employee] && [Order Details.Products.Categories.CategoryName] == [Parameters.Category]
在這里，我們比較員工姓名與參數，以及類別名稱與參數。
我們為詳細報表添加一個標題：
[Parameters.Employee] order's.
最終，模板如下：
Tab Report page:我們回到第一頁。選擇矩陣的數據字段。在屬性查看器中，我們找到“超鏈接”并打開超鏈接編輯器。在報表頁面：
選擇第二頁和參數“Parameters”，子參數的值將被自動插入。
報表已經準備完畢。我們保存它。
現在創建一個Web應用程序，我將使用ASP.Net MVC項目。
在“參考”中添加對FastReport.dll和FastReport.Web.dll庫的引用。
在Controllers文件夾中，找到文件HomeController.cs。這是起始頁面的控制器。在這里，我們將使用報表對象。
我們添加缺少的庫：
using FastReport.Web; using System.Web.UI.WebControls;
添加負責起始頁面的Index方法的代碼：
public ActionResult Index()
{
WebReport webReport = new WebReport(); //create the instance of the WebReport.
webReport.Width = Unit.Percentage(100); //set the webReport object width 100%
webReport.Height = Unit.Percentage(100); //set the webReport object heigh 100%
string report_path = "J:\\Program Files (x86)\\FastReports\\FastReport.Net\\Demos\\Reports\\"; //reports folder
System.Data.DataSet dataSet = new System.Data.DataSet(); //create a dataset
dataSet.ReadXml(report_path + "nwind.xml"); //load the xml db
webReport.Report.RegisterData(dataSet, "NorthWind"); //register db in thr report
webReport.TabPosition = TabPosition.Hidden; //hide the detail reports tabs
webReport.ShowBackButton = true;// show back button
ViewBag.WebReport = webReport; //pass the web report to View
return View(); }
這里有兩個有趣的選項：TabPosition和ShowBackButton。第一個負責顯示工具欄上的報表標簽。我們已經隱藏了標簽。第二個選項設置“返回”按鈕。它可以讓你回到以前的報表。
現在我們將在視圖中顯示報表。我們打開index.cshtml文件（Views-> Home文件夾）進行編輯。
設置頁面標題并顯示網頁報表：
@{
ViewBag.Title = "Home Page";
}
@ViewBag.WebReport.GetHtml()
在_Layout.cshtml文件的<head>部分添加腳本和樣式：
<head> @WebReportGlobals.Scripts() @WebReportGlobals.Styles() </head>
在“視圖”文件夾中的Web.config文件中添加命名空間。
<namespaces> <add namespace="FastReport" /> <add namespace="FastReport.Web" /> </namespaces>
添加位于項目根目錄的處理句柄Web.config文件：
<system.webServer> <handlers> <add name="FastReportHandler" path="FastReport.Export.axd" verb="*" type="FastReport.Web.Handlers.WebExport"/> </handlers> </system.webServer>
運行應用程序。我們的矩陣報表大概長這樣：
點擊任何數據單元的類別總數。我們看到有關相關人員和類別的詳細報表：
詳細報表顯示此員工從所選類別中發出的所有訂單。
現在我們可以為網頁頁面創建交互式矩陣了，技能樹上又點亮了一個新技能。
推薦閱讀
- FastReport VCL報表控件開發者手冊
- FastReport Online Designer中文手冊
- Fastreport.Net教程2016
- Fastreport.Net用戶手冊
- FastReport.Net教程2017（持續更新中···）
- FastReport Online Designer教程2017（持續更新中···）
- 報表教程2017（持續更新中···）
- FastReport.Net v2018.1版本更新已經發布！
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線