文檔首頁>>FastReport-web報(bào)表開發(fā)系列教程（持續(xù)更新中）>>如何在web報(bào)表中添加下拉列表

如何在web報(bào)表中添加下拉列表

在本文中，我們將介紹如何創(chuàng)建帶有下拉組件的交互式報(bào)表。我們將對(duì)記錄進(jìn)行分組，并以折疊形式顯示。如有必要，用戶可以打開并查看組的內(nèi)容。該功能可以顯著改善列表的用戶體驗(yàn)。畢竟，組在報(bào)表中占用最小的空間，而不會(huì)使數(shù)據(jù)超載。你只會(huì)看到已打開的組的數(shù)據(jù)。

首先我們來創(chuàng)建一個(gè)包含組的報(bào)表。

我使用了FastReport.Net交付的nwind.xml數(shù)據(jù)庫。這次我們只需要一張表單 - 產(chǎn)品，就夠了。

報(bào)表模板由五個(gè)帶區(qū)組成：

報(bào)表標(biāo)題；
組頭；
數(shù)據(jù)；
組footer；
頁面footer。

如何在web報(bào)表中添加下拉列表

在數(shù)據(jù)帶中，我們放置字段：Products.ProductName 和 Products.UnitPrice 。

在組頭中，我們將顯示產(chǎn)品名稱的首字母：

[[Products.ProductName].Substring(0,1)]

雙擊GroupHeader帶區(qū)。

在帶區(qū)的編輯器中，輸入按照首字母分組產(chǎn)品的表達(dá)式。

如何在web報(bào)表中添加下拉列表

排序已禁用。

現(xiàn)在雙擊數(shù)據(jù)帶。在編輯器中，選擇“排序”選項(xiàng)卡：

如何在web報(bào)表中添加下拉列表

選擇按產(chǎn)品名稱排序。

在數(shù)據(jù)窗口中，新添加一個(gè)“Total”：

如何在web報(bào)表中添加下拉列表

至于函數(shù)，我們使用“Count”：

如何在web報(bào)表中添加下拉列表

下拉列表通常會(huì)有一個(gè)“加號(hào)”，表示該組已折疊。當(dāng)列表展開時(shí)，圖標(biāo)變?yōu)?ldquo;減號(hào)”。為了實(shí)現(xiàn)這個(gè)，我們使用CheckBox組件。將其放在組頭旁邊：

如何在web報(bào)表中添加下拉列表

在添加的對(duì)象的屬性中，更改CheckedSymbol，選擇加號(hào)。而對(duì)于UncheckedSymbol，請(qǐng)選擇減號(hào)。

現(xiàn)在，為CheckBox對(duì)象和右側(cè)的文本字段，設(shè)置超鏈接屬性：

如何在web報(bào)表中添加下拉列表

在自定義選項(xiàng)卡上，設(shè)置表達(dá)式：

[Products.ProductName].Substring(0,1)

現(xiàn)在是時(shí)候?qū)懸粊G丟代碼了。我們選擇GroupHeader帶區(qū)。在屬性查看器中，選擇“Events”選項(xiàng)卡，找到 BeforePrint 事件并雙擊它，在處理句柄中添加以下代碼：

string groupName = ((String)Report.GetColumnValue("Products.ProductName")).Substring(0, 1);
//Gets group name
 bool groupVisible = expandedGroups.Contains(groupName);
//Check the group visibility
 Data1.Visible = groupVisible;// Sets a data visibility according with group visibility
 GroupFooter1.Visible = groupVisible;// Sets the group footer visibility according with group visibility CheckBox1.Checked = !groupVisible;//Sets the checkbox condition according with group visibility

現(xiàn)在創(chuàng)建一個(gè)可見組的列表。之后會(huì)派上用場(chǎng)：

private List<string> expandedGroups = new List<string>();

讓我們回到報(bào)表頁面。選擇CheckBox對(duì)象。在屬性查看器中，我們切換到“事件”并通過雙擊創(chuàng)建“點(diǎn)擊”的處理句柄。

string groupName = (sender as CheckBoxObject).Hyperlink.Value; // Gets group name from hyperlink 
if (expandedGroups.Contains(groupName)) //If the list of visible groups contains selected group
 expandedGroups.Remove(groupName); // Then delete selected group from the list of visible groups
 else
 expandedGroups.Add(groupName); //Else add group to list of visible groups
 Report.Refresh(); //Refresh the report

報(bào)表已經(jīng)就緒。我們接著創(chuàng)建一個(gè)Web應(yīng)用程序。

我使用的是ASP.Net MVC項(xiàng)目。

在Reference中添加astReport.Net提供的FastReport.dll和FastReport.Web.dll。

在HomeController中，添加以下代碼：

添加庫：

using FastReport.Web;
using System.Web.UI.WebControls;
 
 
public ActionResult Index()
 {
WebReport webReport = new WebReport();
webReport.Height = Unit.Percentage(100);
webReport.Width = Unit.Percentage(100);
string report_path = "J:\\Program Files (x86)\\FastReports\\FastReport.Net\\Demos\\Reports\\"; 
System.Data.DataSet dataSet = new System.Data.DataSet(); 
dataSet.ReadXml(report_path + "nwind.xml"); 
webReport.Report.RegisterData(dataSet, "NorthWind"); 
webReport.Report.Load(report_path + "InteractiveDrillDown.frx"); ViewBag.WebReport = webReport;
return View();
 }

我們逐行分析一下：

創(chuàng)建一個(gè)Web報(bào)表對(duì)象實(shí)例；
將Web報(bào)表的高度設(shè)置為100％；
將Web報(bào)表的寬度設(shè)置為100％；
設(shè)置報(bào)表目錄；
創(chuàng)建一個(gè)數(shù)據(jù)源；
將數(shù)據(jù)庫加載到源代碼中；
將數(shù)據(jù)源注冊(cè)到報(bào)表中；
加載報(bào)表；
將報(bào)表傳遞到視圖。

現(xiàn)在編輯視圖Index.cshtml：

@{
 ViewBag.Title = "Home Page";
}
@ViewBag.WebReport.GetHtml()

在_Layout.cshtml文件中添加腳本和樣式：

<head>
@WebReportGlobals.Scripts()
@WebReportGlobals.Styles() 
</head>

在View文件夾的Web.config文件中，我們添加命名空間：

<namespaces>
 <add namespace="FastReport" />
 <add namespace="FastReport.Web" />
 </namespaces>

在項(xiàng)目的根目錄下的Web.config文件中，添加句柄：

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

現(xiàn)在運(yùn)行Web應(yīng)用程序：

如何在web報(bào)表中添加下拉列表

如你所見，當(dāng)你點(diǎn)擊加號(hào)或組頭時(shí)，它將會(huì)展開。在這種情況下，加號(hào)變?yōu)樨?fù)號(hào)。當(dāng)你再次點(diǎn)擊組頭或減號(hào)時(shí)，則組會(huì)折疊。以上。

產(chǎn)品介紹 | 下載試用 | 優(yōu)惠活動(dòng) | 在線客服 | 聯(lián)系Elyn

如何在web報(bào)表中添加下拉列表

推薦閱讀

用科技創(chuàng)就卓越

Create excellence with technology