如何創(chuàng)建帶有大綱和書簽的交互式web報表
交互式報表允許用戶與之交互。例如，報表可以包含超鏈接、書簽和大綱。通過點擊大綱部分的標(biāo)題，你可以將書簽導(dǎo)航到報表中的所需位置。這樣的報表經(jīng)常用在產(chǎn)品目錄中。
讓我們?yōu)閃eb創(chuàng)建一個這樣的交互式報表。為此，我們需要一個報表模板和Web應(yīng)用程序。
我們先從報表開始。其模板將由兩個頁面組成 - 內(nèi)容，和包含數(shù)據(jù)的頁面。比如，我使用的是FastReport.Net交付的nwind.xml數(shù)據(jù)庫。
所以，我們使用表單：類別和產(chǎn)品。我創(chuàng)建了帶有“Categories.CategoryName”字段的簡單模板。
通過點擊類別，用戶將被移動到相應(yīng)的部分。我們稍后再來講這個功能。
現(xiàn)在先創(chuàng)建報表的第二頁
。在這里，“數(shù)據(jù)”帶里將包含一個詳細(xì)信息帶。要添加它，請右鍵單擊“數(shù)據(jù)”帶，然后從列表中選擇“添加詳細(xì)信息帶”。
對于詳細(xì)數(shù)據(jù)帶，你需要添加一個標(biāo)題。為此，點擊“配置帶區(qū)（Configure bands）...”按鈕。在出現(xiàn)的窗口中，選擇詳細(xì)信息數(shù)據(jù)帶，然后單擊“添加”按鈕。選擇“Header”：
將Categories.CategoryName、Categories.Description和Categories.Picture字段拖動到主數(shù)據(jù)帶。
我還想添加一個鏈接到報表的第一頁。模板將如下所示：
我們?yōu)?ldquo;回到第一頁”添加一個超鏈接。右鍵單擊此標(biāo)簽并選擇“超鏈接”。在超鏈接編輯器中，選擇“頁碼”選項卡。并將其值設(shè)置為1：
現(xiàn)在我們將處理詳細(xì)信息數(shù)據(jù)帶。將Products表中的ProductName、UnitPrice、UnitsInStock和Discontinued字段拖到它上面。頁面模板看起來是這樣的：
要實現(xiàn)導(dǎo)航功能，我們需要設(shè)置第一個數(shù)據(jù)帶的一些屬性。選中這個帶，并在屬性查看器中找到“OutlineExpression”。輸入值 - [Categories.CategoryName]。就在屬性的正上，有一個書簽（Bookmark）。為它設(shè)置相同的值。
對于詳細(xì)數(shù)據(jù)帶，我們設(shè)置大綱屬性 - [Products.ProductName]。
現(xiàn)在回到第一頁。我們?yōu)?ldquo;Categories.CategoryName”字段設(shè)置超鏈接屬性。在超鏈接編輯器中，選擇“書簽”選項卡并設(shè)置表達(dá)式[Categories.CategoryName]：
現(xiàn)在我想在每個類別名稱旁邊顯示頁碼。在類別名稱旁邊添加一個文本框并設(shè)置以下文本：[Engine.GetBookmarkPage([Categories.CategoryName])]
此功能將顯示書簽的頁碼。
讓我們?yōu)檫@個文本框添加一個超鏈接：
要顯示帶有書簽的頁面數(shù)量，你必須先建立一個報表。但是，我們的頁碼位于報表的第一頁，所以報表引擎“不知道”書簽的頁碼。為了使我們的功能正常運行，你需要為報表啟用Doublepass屬性。它將允許你運行兩次報表。第一次是獲取書簽的頁碼，第二次是在報表的第一頁顯示這些數(shù)字。要查找此屬性，請從屬性檢查器的下拉列表中選擇“報表”對象：
報表已經(jīng)就緒?，F(xiàn)在創(chuàng)建一個ASP.Net MVC項目。請?zhí)砑覨astReports庫引用：FastReport.dll和FastReport.Web.dll。
我將在網(wǎng)站的第一頁顯示報表對象，所以我們使用控制器HomeController：
using FastReport.Web;
using System.Web.UI.WebControls;
public ActionResult Index()
{
WebReport webReport = new WebReport(); //Create instance of web report object
string report_path = "J:\\Program Files (x86)\\FastReports\\FastReport.Net\\Demos\\Reports\\"; //Set reports path
System.Data.DataSet dataSet = new System.Data.DataSet(); //Create data set
dataSet.ReadXml(report_path + "nwind.xml"); //Load xml db to data set
webReport.Report.RegisterData(dataSet, "NorthWind"); //Register data set in report
webReport.Height = Unit.Percentage(100); //Set report height
webReport.Width = Unit.Percentage(100); //Set report width
webReport.Report.Load(report_path + "InteractiveComplexReport.frx"); //Load report
ViewBag.WebReport = webReport; //Pass report to view
return View();
}
現(xiàn)在我們編輯視圖Home-> Index.cshtml。只留下報表的標(biāo)題和顯示報表：
@{
ViewBag.Title = "Home Page";
}
@ViewBag.WebReport.GetHtml()
將腳本和樣式添加到文件Shared - > _ Layout.cshtml：
<head> @WebReportGlobals.Scripts() @WebReportGlobals.Styles() </head>
將命名空間添加到文件“Views-> 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>
那么，就是這樣。運行應(yīng)用程序，以下是報表的第一頁：
隨便選擇一個類別，然后跳轉(zhuǎn)到它的位置：
要返回到內(nèi)容，請單擊“返回首頁”。
現(xiàn)在，讓我們使用Web報表工具欄中的圖標(biāo)
將報表導(dǎo)出為Adobe Acrobat格式。
這里我們使用了Outline屬性。頁面左側(cè)會有一個詳細(xì)的報表大綱。
這就是為什么你可以使你的web報表更具吸引力，更易于使用。正如我在開始時指出的那樣，這種交互式報表非常適合用來展示產(chǎn)品目錄。
產(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加速/云存儲服務(wù)
客服熱線