如何创建带有大纲和书签的交互式web报表

交互式报表允许用户与之交互。例如,报表可以包含超链接、书签和大纲。通过点击大纲部分的标题,你可以将书签导航到报表中的所需位置。这样的报表经常用在产品目录中。(查看更多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

原文地址:https://www.cnblogs.com/zhaogaojian/p/8349781.html

时间: 2024-10-21 15:22:30

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

OpenStack之KVM用virt-manager创建带有OS的image

第一次用virt-manager创建带有OS的image时,在最后一步总会遇到下面这个错误.后来发现应该是libvirt的问题,选择重新编译安装另一个版本.这里重新选择的时libvirt-1.1.4 Unable to complete install: 'Failed to connect socket to '/var/run/libvirt/virtlogd-sock': No such file or directory' libvirtError: Failed to connect

Hbase 无法创建带有snappy压缩属性的表

一.要求 在Hbase 数据库中创建带有snappy压缩属性的表. 二.登陆到hbase 数据库执行建表操作 hbase(main):016:0> create 'dcs:t_dev_history',{NAME => 'f', DATA_BLOCK_ENCODING => 'PREFIX_TREE', BLOOMFILTER => 'ROW', REPLICATION_SCOPE => '0', VERSIONS => '1', COMPRESSION => '

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

1. 1 using NPOI.HSSF.UserModel; 2 using NPOI.HPSF; 3 using NPOI.POIFS.FileSystem; 4 using Microsoft.VisualStudio.TestTools.UnitTesting; 5 using System.IO; 6 using System; 7 namespace NPOI.Sample1 8 { 9 /// <summary> 10 /// 创建Excel文件 11 /// </summ

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

原文:[百度地图API]如何快速创建带有标注的地图?--快速创建地图工具+如何标注商家 摘要: 如果你不会程序,如果你不想写代码. 如果你想拥有一张自己的地图,如果你想在该地图上标注出你商店的位置. 不要犹豫了,就使用快速创建地图工具吧! -------------------------------------------------------------------------------------- 如何快速创建地图? 一.转入百度提供的快速创建地图工具页面:http://openap

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

创建和关联内容数据库到指定Web应用程序和网站集 一个Web应用程序不限于使用单个内容数据库.SharePoint允许你关联多个内容数据库到Web应用程序.原因之一是基于内容数据库的大小.如果大于200G,将它分到两个内容数据库就显得很有道理. 另一个考虑是内容数据库中的数据类型.如果一个营销网站包含图片和视频,只为这个网站集数据创建一个内容数据库就很合理.另一个例子就是给法律部门创建内容数据库保存所有法律数据. 最后还有个好处是灾难恢复.知道你的数据在哪儿,结构是什么样,会是你应用灾难恢复策略

JavaScript &amp; jQuery交互式Web前端开发

这篇是计算机中网络编程javascript类的优质预售推荐<JavaScript & jQuery交互式Web前端开发>. 内容简介 欢迎选择一种更高效的学习JavaScript和jQuery的方式. 你是一名JavaScript新手?或是您曾经向自己的Web页面上添加过一些脚本,但想以一种更好的方式来实现它们?本书非常适合您.本书不仅向您展示如何阅读和编写JavaScript代码,同时还会以一种简单且视觉化的方式,教您有关计算机编程的基础知识.阅读本书之前,您只需要对HTML和CSS

使用Visual Studio创建图片精灵(Image Sprite)——Web Essential

原文:Creating Image Sprite in Visual Studio - Web Essential 译者注:有关图片精灵的信息请参阅http://baike.baidu.com/view/2173476.htm. 通过本文,可以学习到如何使用Visual Studio的Web Essential扩展来创建图片精灵.假如你有一个网站,使用了大量的图像,且每个图像都是通过独立的请求加载的,那么请求的数量就会增加,这样,网站速度就会变慢.而这就需要进行优化,以加快网站速度. 图片精灵是

DevExpress XtraReports 入门四 创建 Web 报表

原文:DevExpress XtraReports 入门四 创建 Web 报表 本文只是为了帮助初次接触或是需要DevExpress XtraReports报表的人群使用的,为了帮助更多的人不会像我这样浪费时间才写的这篇文章,高手不想的看请路过 本文内容来DevExpress XtraReports帮助文档,如看过类似的请略过. 废话少说 开始正事 一.创建 Web 报表并绑定数据  启动 MS Visual Studio (2005.2008.或 2010). 新建一个 ASP.NET Web

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

       在本节中.你将開始学习阅读和编写JavaScript代码,还将学习怎样编写Web浏览器可以遵照运行的指令.在開始学习后面章节中的更复杂的概念之前.我们先学习语言的一些核心部分,然后看看怎样使用它们来编写一些很基础的(仅包括少量简单步骤)脚本程序.     在開始学习后面章节中的更复杂的概念之前,我们先学习语言的一些核心部分,然后看看怎样使用它们来编写一些很基础的(仅包括少量简单步骤)脚本程序. 语言: 语法结构 不论什么新的语言都一样,都要学习它们的新词汇(词汇表),以及将这些词汇