文檔金喜正規(guī)買球>>FastReport-web報(bào)表開發(fā)系列教程（持續(xù)更新中）>>如何創(chuàng)建帶有大綱和書簽的交互式web報(bào)表

如何創(chuàng)建帶有大綱和書簽的交互式web報(bào)表

交互式報(bào)表允許用戶與之交互。例如，報(bào)表可以包含超鏈接、書簽和大綱。通過點(diǎn)擊大綱部分的標(biāo)題，你可以將書簽導(dǎo)航到報(bào)表中的所需位置。這樣的報(bào)表經(jīng)常用在產(chǎn)品目錄中。

讓我們?yōu)閃eb創(chuàng)建一個(gè)這樣的交互式報(bào)表。為此，我們需要一個(gè)報(bào)表模板和Web應(yīng)用程序。

我們先從報(bào)表開始。其模板將由兩個(gè)頁(yè)面組成 - 內(nèi)容，和包含數(shù)據(jù)的頁(yè)面。比如，我使用的是FastReport.Net交付的nwind.xml數(shù)據(jù)庫(kù)。

所以，我們使用表單：類別和產(chǎn)品。我創(chuàng)建了帶有“Categories.CategoryName”字段的簡(jiǎn)單模板。

通過點(diǎn)擊類別，用戶將被移動(dòng)到相應(yīng)的部分。我們稍后再來講這個(gè)功能。

現(xiàn)在先創(chuàng)建報(bào)表的第二頁(yè) 如何創(chuàng)建帶有大綱和書簽的交互式web報(bào)表。在這里，“數(shù)據(jù)”帶里將包含一個(gè)詳細(xì)信息帶。要添加它，請(qǐng)右鍵單擊“數(shù)據(jù)”帶，然后從列表中選擇“添加詳細(xì)信息帶”。

對(duì)于詳細(xì)數(shù)據(jù)帶，你需要添加一個(gè)標(biāo)題。為此，點(diǎn)擊“配置帶區(qū)（Configure bands）...”按鈕。在出現(xiàn)的窗口中，選擇詳細(xì)信息數(shù)據(jù)帶，然后單擊“添加”按鈕。選擇“Header”：

如何創(chuàng)建帶有大綱和書簽的交互式web報(bào)表

將Categories.CategoryName、Categories.Description和Categories.Picture字段拖動(dòng)到主數(shù)據(jù)帶。

我還想添加一個(gè)鏈接到報(bào)表的第一頁(yè)。模板將如下所示：

如何創(chuàng)建帶有大綱和書簽的交互式web報(bào)表

我們?yōu)?ldquo;回到第一頁(yè)”添加一個(gè)超鏈接。右鍵單擊此標(biāo)簽并選擇“超鏈接”。在超鏈接編輯器中，選擇“頁(yè)碼”選項(xiàng)卡。并將其值設(shè)置為1：

如何創(chuàng)建帶有大綱和書簽的交互式web報(bào)表

現(xiàn)在我們將處理詳細(xì)信息數(shù)據(jù)帶。將Products表中的ProductName、UnitPrice、UnitsInStock和Discontinued字段拖到它上面。頁(yè)面模板看起來是這樣的：

如何創(chuàng)建帶有大綱和書簽的交互式web報(bào)表

要實(shí)現(xiàn)導(dǎo)航功能，我們需要設(shè)置第一個(gè)數(shù)據(jù)帶的一些屬性。選中這個(gè)帶，并在屬性查看器中找到“OutlineExpression”。輸入值 - [Categories.CategoryName]。就在屬性的正上，有一個(gè)書簽（Bookmark）。為它設(shè)置相同的值。

對(duì)于詳細(xì)數(shù)據(jù)帶，我們?cè)O(shè)置大綱屬性 - [Products.ProductName]。

現(xiàn)在回到第一頁(yè)。我們?yōu)?ldquo;Categories.CategoryName”字段設(shè)置超鏈接屬性。在超鏈接編輯器中，選擇“書簽”選項(xiàng)卡并設(shè)置表達(dá)式[Categories.CategoryName]：

如何創(chuàng)建帶有大綱和書簽的交互式web報(bào)表

現(xiàn)在我想在每個(gè)類別名稱旁邊顯示頁(yè)碼。在類別名稱旁邊添加一個(gè)文本框并設(shè)置以下文本：[Engine.GetBookmarkPage([Categories.CategoryName])]

此功能將顯示書簽的頁(yè)碼。

讓我們?yōu)檫@個(gè)文本框添加一個(gè)超鏈接：

如何創(chuàng)建帶有大綱和書簽的交互式web報(bào)表

要顯示帶有書簽的頁(yè)面數(shù)量，你必須先建立一個(gè)報(bào)表。但是，我們的頁(yè)碼位于報(bào)表的第一頁(yè)，所以報(bào)表引擎“不知道”書簽的頁(yè)碼。為了使我們的功能正常運(yùn)行，你需要為報(bào)表啟用Doublepass屬性。它將允許你運(yùn)行兩次報(bào)表。第一次是獲取書簽的頁(yè)碼，第二次是在報(bào)表的第一頁(yè)顯示這些數(shù)字。要查找此屬性，請(qǐng)從屬性檢查器的下拉列表中選擇“報(bào)表”對(duì)象：

如何創(chuàng)建帶有大綱和書簽的交互式web報(bào)表

報(bào)表已經(jīng)就緒。現(xiàn)在創(chuàng)建一個(gè)ASP.Net MVC項(xiàng)目。請(qǐng)?zhí)砑覨astReports庫(kù)引用：FastReport.dll和FastReport.Web.dll。

我將在網(wǎng)站的第一頁(yè)顯示報(bào)表對(duì)象，所以我們使用控制器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。只留下報(bào)表的標(biāo)題和顯示報(bà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>

將一個(gè)處理句柄添加到位于項(xiàng)目根目錄下的文件“Web.config”中：

<system.webServer> 
 <handlers>
 …
 <add name="FastReportHandler" path="FastReport.Export.axd" verb="*" type="FastReport.Web.Handlers.WebExport"/>
 </handlers>
 </system.webServer>

那么，就是這樣。運(yùn)行應(yīng)用程序，以下是報(bào)表的第一頁(yè)：

如何創(chuàng)建帶有大綱和書簽的交互式web報(bào)表