如何在網(wǎng)頁報表中創(chuàng)建交互式矩陣
我們已經(jīng)講解過很多網(wǎng)頁報表的開發(fā)技巧了，今天我們講一講如何創(chuàng)建交互式矩陣報表，或者說交叉報表。我們將使用FastReport.Net的xml數(shù)據(jù)庫。選擇好表格：
添加矩陣（Matrix）對象到數(shù)據(jù)帶區(qū)：
現(xiàn)在在數(shù)據(jù)窗口中打開“訂單明細”表。你將看到相關聯(lián)的表：產(chǎn)品與訂單。打開訂單。它又連接著一張表——員工。我們打開它并將FirstName字段拖到列頭：
雙擊添加的字段。讓我們將LastName字段添加到FirstName字段，以顯示員工的全名。所以，整個字段組成如下所示：
[Order Details.Orders.Employees.FirstName]+" "+[Order Details.Orders.Employees.LastName]
這大幅擴展了列頭。讓我們禁用“自動寬度”功能。要做到這點，請右鍵單擊Matrix對象。然后在上下文菜單中勾選掉“自動尺寸”：
現(xiàn)在你可以自由調(diào)整行和列的大小。
將Photo字段拖到列頭。調(diào)整單元格大小以適應添加的字段。
現(xiàn)在找到在訂單明細表中找到關聯(lián)的產(chǎn)品表。打開它。它也有一張關聯(lián)的類別表。將CategoryName字段從類別表中拖動到行頭，并將Picture字段放到同一個單元格。
現(xiàn)在，將“單價”字段從訂單明細表拖到數(shù)據(jù)單元格中。編輯添加的字段。你需要查找三個字段的產(chǎn)品：單價，數(shù)量和單折扣。因此，我們找到真正的銷售額：
[Order Details.UnitPrice] * [Order Details.Quantity] *（decimal）（1 - [Order Details.Discount]）
矩陣幾乎準備就緒，它還有待選擇樣式。右鍵單擊矩陣，然后選擇“樣式”。例如，橙色。這就已經(jīng)很漂亮了：
在單獨的頁面上創(chuàng)建詳細的報表。在報表中添加第二頁。
將Order Details.OrderDate字段添加到數(shù)據(jù)帶區(qū)。接下來，我們將Order Detail.Products.ProductName字段放在它旁邊。同時拖動字段：Order Detail.UnitPrice、Order Detail.Quantity和Order Detail.Discount。
要顯示所需的員工的數(shù)據(jù)，你需要過濾表格。我們將傳輸數(shù)據(jù)以比較第一頁和第二頁。為此，請在第二頁中創(chuàng)建參數(shù)。針對這個選項，我們創(chuàng)建了兩個子參數(shù)，都是字符串類型：
現(xiàn)在為數(shù)據(jù)帶添加一個過濾器。雙擊并選擇“過濾器”選項卡：
[Order Details.Orders.Employees.FirstName] + " " + [Order Details.Orders.Employees.LastName] == [Parameters.Employee] && [Order Details.Products.Categories.CategoryName] == [Parameters.Category]
在這里，我們比較員工姓名與參數(shù)，以及類別名稱與參數(shù)。
我們?yōu)樵敿殘蟊硖砑右粋€標題：
[Parameters.Employee] order's.
最終，模板如下：
Tab Report page:我們回到第一頁。選擇矩陣的數(shù)據(jù)字段。在屬性查看器中，我們找到“超鏈接”并打開超鏈接編輯器。在報表頁面：
選擇第二頁和參數(shù)“Parameters”，子參數(shù)的值將被自動插入。
報表已經(jīng)準備完畢。我們保存它。
現(xiàn)在創(chuàng)建一個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。第一個負責顯示工具欄上的報表標簽。我們已經(jīng)隱藏了標簽。第二個選項設置“返回”按鈕。它可以讓你回到以前的報表。
現(xiàn)在我們將在視圖中顯示報表。我們打開index.cshtml文件（Views-> Home文件夾）進行編輯。
設置頁面標題并顯示網(wǎng)頁報表：
@{
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>
運行應用程序。我們的矩陣報表大概長這樣：
點擊任何數(shù)據(jù)單元的類別總數(shù)。我們看到有關相關人員和類別的詳細報表：
詳細報表顯示此員工從所選類別中發(fā)出的所有訂單。
現(xiàn)在我們可以為網(wǎng)頁頁面創(chuàng)建交互式矩陣了，技能樹上又點亮了一個新技能。
產(chǎn)品介紹 | 下載試用 | 優(yōu)惠活動 | 在線客服 | 聯(lián)系Elyn
推薦閱讀
- FastReport VCL報表控件開發(fā)者手冊
- FastReport Online Designer中文手冊
- Fastreport.Net教程2016
- Fastreport.Net用戶手冊
- FastReport.Net教程2017（持續(xù)更新中···）
- FastReport Online Designer教程2017（持續(xù)更新中···）
- 報表教程2017（持續(xù)更新中···）
- FastReport.Net v2018.1版本更新已經(jīng)發(fā)布！
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號
提供CDN加速/云存儲服務
客服熱線