如何在web報表中添加下拉列表
在本文中，我們將介紹如何創建帶有下拉組件的交互式報表。我們將對記錄進行分組，并以折疊形式顯示。如有必要，用戶可以打開并查看組的內容。該功能可以顯著改善列表的用戶體驗。畢竟，組在報表中占用最小的空間，而不會使數據超載。你只會看到已打開的組的數據。
首先我們來創建一個包含組的報表。
我使用了交付的nwind.xml數據庫。這次我們只需要一張表單 - 產品，就夠了。
報表模板由五個帶區組成：
- 報表標題；
- 組頭；
- 數據；
- 組footer；
- 頁面footer。
在數據帶中，我們放置字段：Products.ProductName 和 Products.UnitPrice 。
在組頭中，我們將顯示產品名稱的首字母：
[[Products.ProductName].Substring(0,1)]
雙擊GroupHeader帶區。
在帶區的編輯器中，輸入按照首字母分組產品的表達式。
排序已禁用。
現在雙擊數據帶。在編輯器中，選擇“排序”選項卡：
選擇按產品名稱排序。
在數據窗口中，新添加一個“Total”：
至于函數，我們使用“Count”：
下拉列表通常會有一個“加號”，表示該組已折疊。當列表展開時，圖標變為“減號”。為了實現這個，我們使用CheckBox組件。將其放在組頭旁邊：
在添加的對象的屬性中，更改CheckedSymbol，選擇加號。而對于UncheckedSymbol，請選擇減號。
現在，為CheckBox對象和右側的文本字段，設置超鏈接屬性：
在自定義選項卡上，設置表達式：
[Products.ProductName].Substring(0,1)
現在是時候寫一丟丟代碼了。我們選擇GroupHeader帶區。在屬性查看器中，選擇“Events”選項卡，找到 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
現在創建一個可見組的列表。之后會派上用場：
private List<string> expandedGroups = new List<string>();
讓我們回到報表頁面。選擇CheckBox對象。在屬性查看器中，我們切換到“事件”并通過雙擊創建“點擊”的處理句柄。
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
報表已經就緒。我們接著創建一個Web應用程序。
我使用的是ASP.Net MVC項目。
在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();
}
我們逐行分析一下：
- 創建一個Web報表對象實例；
- 將Web報表的高度設置為100％；
- 將Web報表的寬度設置為100％；
- 設置報表目錄；
- 創建一個數據源；
- 將數據庫加載到源代碼中；
- 將數據源注冊到報表中；
- 加載報表；
- 將報表傳遞到視圖。
現在編輯視圖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>
在項目的根目錄下的Web.config文件中，添加句柄：
<system.webServer> <handlers> … <add name="FastReportHandler" path="FastReport.Export.axd" verb="*" type="FastReport.Web.Handlers.WebExport"/> </handlers> </system.webServer>
現在運行Web應用程序：
如你所見，當你點擊加號或組頭時，它將會展開。在這種情況下，加號變為負號。當你再次點擊組頭或減號時，則組會折疊。以上。
推薦閱讀
- FastReport VCL報表控件開發者手冊
- Fastreport.Net用戶手冊
- FastReport.Net教程2017（持續更新中···）
- FastReport Online Designer教程2017（持續更新中···）
- 報表教程2017（持續更新中···）
- FastReport.Net v2018.1版本更新已經發布！
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線