交互式报表允许用户与之交互。例如，报表可以包含超链接、书签和大纲。通过点击大纲部分的标题，你可以将书签导航到报表中的所需位置。这样的报表经常用在产品目录中。（查看更多web报表教程）

让我们为Web创建一个这样的交互式报表。为此，我们需要一个报表模板和Web应用程序。

我们先从报表开始。其模板将由两个页面组成 - 内容，和包含数据的页面。比如，我使用的是FastReport.Net交付的nwind.xml数据库。

所以，我们使用表单：类别和产品。我创建了带有“Categories.CategoryName”字段的简单模板。

通过点击类别，用户将被移动到相应的部分。我们稍后再来讲这个功能。

现在先创建报表的第二页。在这里，“数据”带里将包含一个详细信息带。要添加它，请右键单击“数据”带，然后从列表中选择“添加详细信息带”。

对于详细数据带，你需要添加一个标题。为此，点击“配置带区（Configure bands）...”按钮。在出现的窗口中，选择详细信息数据带，然后单击“添加”按钮。选择“Header”：

将Categories.CategoryName、Categories.Description和Categories.Picture字段拖动到主数据带。

我还想添加一个链接到报表的第一页。模板将如下所示：

我们为“回到第一页”添加一个超链接。右键单击此标签并选择“超链接”。在超链接编辑器中，选择“页码”选项卡。并将其值设置为1：

现在我们将处理详细信息数据带。将Products表中的ProductName、UnitPrice、UnitsInStock和Discontinued字段拖到它上面。页面模板看起来是这样的：

要实现导航功能，我们需要设置第一个数据带的一些属性。选中这个带，并在属性查看器中找到“OutlineExpression”。输入值 - [Categories.CategoryName]。就在属性的正上，有一个书签（Bookmark）。为它设置相同的值。

对于详细数据带，我们设置大纲属性 - [Products.ProductName]。

现在回到第一页。我们为“Categories.CategoryName”字段设置超链接属性。在超链接编辑器中，选择“书签”选项卡并设置表达式[Categories.CategoryName]：

现在我想在每个类别名称旁边显示页码。在类别名称旁边添加一个文本框并设置以下文本：[Engine.GetBookmarkPage([Categories.CategoryName])]

此功能将显示书签的页码。

让我们为这个文本框添加一个超链接：

要显示带有书签的页面数量，你必须先建立一个报表。但是，我们的页码位于报表的第一页，所以报表引擎“不知道”书签的页码。为了使我们的功能正常运行，你需要为报表启用Doublepass属性。它将允许你运行两次报表。第一次是获取书签的页码，第二次是在报表的第一页显示这些数字。要查找此属性，请从属性检查器的下拉列表中选择“报表”对象：

报表已经就绪。现在创建一个ASP.Net MVC项目。请添加FastReports库引用：FastReport.dll和FastReport.Web.dll。

我将在网站的第一页显示报表对象，所以我们使用控制器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();

 }

现在我们编辑视图Home-> Index.cshtml。只留下报表的标题和显示报表：

@{

 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>

那么，就是这样。运行应用程序，以下是报表的第一页：

随便选择一个类别，然后跳转到它的位置：

要返回到内容，请单击“返回首页”。

现在，让我们使用Web报表工具栏中的图标将报表导出为Adobe Acrobat格式。

这里我们使用了Outline属性。页面左侧会有一个详细的报表大纲。

这就是为什么你可以使你的web报表更具吸引力，更易于使用。正如我在开始时指出的那样，这种交互式报表非常适合用来展示产品目录。

产品介绍 | 下载试用 | 优惠活动 | 在线客服 | 联系Elyn

推荐阅读
  • 如何在web报表中添加下拉列表
  • 如何将MySQL数据库连接到报表中
  • 如何在MVC项目中创建交互式Web报表
  • 如何在MVC中快速打印报表
  • 如何在MVC中将报表下载为Excel文档
  • 如何在一个WebReport对象中加入多个报表
  • FastReport.Net v2018.1版本更新已经发布！（附下载）
本站文章除注明转载外，均为本站原创或翻译
欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明：文章转载自：FastReport控件中文网 [http://www.fastreportcn.com/]
本文地址：http://www.fastreportcn.com/post/1951.html

如何创建带有大纲和书签的交互式web报表的更多相关文章

  1. 【百度地图API】如何快速创建带有标注的地图？——快速创建地图工具+如何标注商家

    原文:[百度地图API]如何快速创建带有标注的地图?--快速创建地图工具+如何标注商家 摘要: 如果你不会程序,如果你不想写代码. 如果你想拥有一张自己的地图,如果你想在该地图上标注出你商店的位置. ...

  2. NPOI-Excel系列-1002.创建带有Document Summary Information和Summary Information的Excel文件

    1. using NPOI.HSSF.UserModel; using NPOI.HPSF; using NPOI.POIFS.FileSystem; using Microsoft.VisualSt ...

  3. 创建带有IN类型参数的存储过程（四十八）

    创建带有IN类型参数的存储过程 我们经常要从数据表中删除记录,一般情况我们删除记录都是根据id来删除的,比如我们通常要输入DELETE FROM 表名 WHERE 后面跟上我们的条件,因为我们要经常写 ...

  4. 用 cctld工具创建带有国家代码的IP地址表

    用 cctld工具创建带有国家代码的IP地址表 cctld tools is creating IP addresses table with Country Code 项目地址 https://gi ...

  5. SpringBoot学习笔记（11）：使用WebSocket构建交互式Web应用程序

    SpringBoot学习笔记(11):使用WebSocket构建交互式Web应用程序 快速开始 本指南将引导您完成创建“hello world”应用程序的过程,该应用程序在浏览器和服务器之间来回发送消 ...

  6. 创建和关联内容数据库到指定Web应用程序和站点集

    创建和关联内容数据库到指定Web应用程序和站点集         一个Web应用程序不限于使用单个内容数据库.SharePoint同意你关联多个内容数据库到Web应用程序.原因之中的一个是基于内容数据 ...

  7. DevExpress XtraReports 入门四 创建 Web 报表

    原文:DevExpress XtraReports 入门四 创建 Web 报表 本文只是为了帮助初次接触或是需要DevExpress XtraReports报表的人群使用的,为了帮助更多的人不会像我这 ...

  8. 《JavaScript &amp; jQuery交互式Web前端开发》之JavaScript基础指令

           在本节中.你将開始学习阅读和编写JavaScript代码,还将学习怎样编写Web浏览器可以遵照运行的指令.在開始学习后面章节中的更复杂的概念之前.我们先学习语言的一些核心部分,然后看看怎 ...

  9. 创建自己的RSA密钥来保护web.config 加密数据库连接字符串

    通过创建自己的RSA密钥来保护web.config1创建RSA密钥:C:\Windows\Microsoft.NET\Framework64\v4.0.30319>aspnet_regiis - ...

随机推荐

  1. scope 前缀开头的方法

    https://learnku.com/docs/laravel/5.6/eloquent/1403 本地范围 本地范围允许定义通用的约束集合以便在应用中复用. 例如, 你可能经常需要获取「受欢迎的」 ...

  2. WPF 如何控制右键菜单ContextMenu的弹出

    在具体做一些项目的时候,有时候需要需要先左键点击某个节点,然后再右键点击节点的时候才弹出右键菜单,所以直接右键点击时需要禁用掉右键菜单,这里比如我们为Grid添加了ContextMenu,但是我们需要 ...

  3. Log4J日志信息配置文件详解

    原文地址: http://blog.csdn.net/wuxintdrh/article/details/78282097 使用log4j 记录日志甚是方便,其提供了两种日志配置方式,log4j.pr ...

  4. 开启打印服务Print Spooler

    windows系统需要开启Print Spooler才能进行打印,如果不开启,可能造成很多现象和原因,比如windows打印机队列的打印机全部消失,用Lodop打印的时候提示"Printer ...

  5. BZOJ4998星球联盟——LCT+并查集(LCT动态维护边双连通分量)

    题目描述 在遥远的S星系中一共有N个星球,编号为1…N.其中的一些星球决定组成联盟,以方便相互间的交流.但是,组成 联盟的首要条件就是交通条件.初始时,在这N个星球间有M条太空隧道.每条太空隧道连接两 ...

  6. Sightseeing tour HDU - 1956（混合欧拉回路）

    题意: 有n个点,m条边,其中有单向边和双向边,求是否存在欧拉回路 解析: 刚开始想...判断一下每个点的度数不就好了...emm..还是年轻啊.. 判断是解决不了问题的,因为可能会有某两个点冲突,比 ...

  7. Leading and Trailing LightOJ - 1282 （取数的前三位和后三位）

    题意: 求n的k次方的前三位 和 后三位 ...刚开始用 Java的大数写的...果然超时... 好吧  这题用快速幂取模求后三位  然后用一个技巧求前三位 ...orz... 任何一个数n均可以表示 ...

  8. Linux开机自动挂载存储的两种方式

    登录服务器,给查看了下,发现确实是没有自动加载,df -h只能显示本地硬盘的分区,fdisk -l 还是能看到存储空间,这说明这个服务器连接存储是木有问题的. 输入history | grep mou ...

  9. 【题解】 bzoj1076: [SCOI2008]奖励关 （装压+期望dp）

    题面戳我 Solution 并不会做,看了下题解大概了解了.期望这个东西好难搞啊qwq 我们定义\(dp[i][j]\)表示第\(i\)步,拿到宝物前的状态为\(j\). 正着来会有很多不合法的情况, ...

  10. LOJ #6436. 「PKUSC2018」神仙的游戏(字符串+NTT)

    题面 LOJ #6436. 「PKUSC2018」神仙的游戏 题解 参考 yyb 的口中的长郡最强选手 租酥雨大佬的博客 ... 一开始以为 通配符匹配 就是类似于 BZOJ 4259: 残缺的字符串 ...