ActiveReport如何自定义HTML浏览器用户界面

作者:控件中国网   出处:控件中国网   2015-07-27 14:09:04   阅读:3

您可以使用JQuery方法来自定义HTMLViewer界面。 WebViewer控件可以在页面的脚本中添加jQuery库。在本示例中使用代码,可以用来从HTMLViewer工具栏中删除按钮,并添加一个客户端PDF导出的执行程序。
本示例分为以下几个步骤:
•将ActiveReport报表控件加载到Visual Studio的ASP.NET Web应用程序。
•访问WebViewer的视图模型。
•删除一个现有的工具栏按钮。
•添加一个导出为PDF格式的功能。
•将自定义用户界面绑定到WebViewer的视图模型。
当您完成本示例时,您可以获得一个运行时类似于以下样式的HTMLViewer。

image161_573.jpg

如何将ActiveReport报表控件加载到Web应用程序
1.   创建一个新的Visual Studio的ASP.NET Web应用程序。
2.   在被创建的Default.aspx上,跳转到Visual Studio工具箱的ActiveReports 9页面报表选项卡,并将一个WebViewer控件拖放到报表设计器视图。
3.   加载在“单个布局报表”示例结束时生成的报表。
注意:您可以加载HTMLViewer中的任何报表,区域或页面。要想了解有关如何加载报表的更多详细信息,请您参阅“Web浏览器入门指南”这一章节。
如何访问WebViewer视图模型
HTMLWeb浏览器是通过使用MVVM模式来创建的,该模式可以提供一个不依赖于用户界面的视图模型。该代码可以通过使用有据可查的属性和方法,来访问报表浏览器的视图模型,并将自定义用户界面与其绑定。对于MVVM支持,代码可以使用knockout.js,这是JavaScript标准的MVVM库。 Knockout.js可以提供声明式绑定,可观察的对象,和HTML标记的集合。要想了解更多详细信息,请您参阅“如何使用JavaScript来操作HTML浏览器”这一章节。
请按照以下的步骤来访问ViewModel。
1.   在Default.aspx文件的源视图中,添加一个<script>标签。
在正文标记之前,按照如下所示来添加一个脚本标签
<scriptlanguage="javascript"type="text/javascript">
</script>
2.   将以下的Javascript代码添加到文档的Onload事件处理程序和WebViewer的Loaded事件处理程序上。当在HTML页面上渲染该用户界面时,这两个事件处理程序会被触发。
将以下代码粘贴到.aspx源
<scriptlanguage="javascript"type="text/javascript">functionviewer_loaded()
{
};
functiondocument_onload()
{
};
</script>
...
<bodyonload="returndocument_onload()">
3.   将以下的Javascript代码添加到在viewer_loaded事件处理程序内部,以便访问WebViewer的视图模型:
将以下代码粘贴到.aspx源
varviewModel=GetViewModel('WebViewer1');
4.   将以下的Javascript代码添加到document_load事件处理程序内部,以便将WebViewer的Loaded事件绑定到客户端的viewer_loaded事件:
将以下代码粘贴到.aspx源
$('#WebViewer1').bind('loaded',viewer_loaded);
如何从WebViewer工具栏上删除按钮
在Default.aspx文件的源视图上,将以下的Javascript代码添加到viewer_loaded事件处理程序中,以便访问WebViewer工具栏,然后从工具栏中删除“后一页”按钮:

将以下代码粘贴到.aspx源
vartoolbar=('#WebViewer1').find('.arvToolBar');toolbar.find('.btnNext').remove();
 
注意:为了访问WebViewer工具栏的子元素,您需要他们的CSS类名称。以下是一个引用的列表:
工具栏子元素
切换侧边栏按钮:btnToggleSidebar
查找按钮:btnFind
第一页按钮:btnFirst
前一页按钮:btnPrev
页面标签:toolbarLabel
页码输入框:toolbarInput
翻页键:btnNext
最后一页按钮:btnLast
返回父报表按钮:btnBack
如何添加一个导出为PDF格式的功能
以下的步骤说明了应该如何建立一个自定义的用户界面。
1.   在Default.aspx文件的源视图中,添加以下的Javascript代码到<script>标签内部,以创建一个函数。 此函数可以访问视图模型,并将报表导出为PDF格式:
将以下代码粘贴到.aspx源
functionexportPDF()
{
varviewModel=GetViewModel('WebViewer1');if(viewModel.PageLoaded())
{
viewModel.Export(ExportType.Pdf,function(uri)
{
window.location=uri;
},true);
}
}
2.  在Default.aspx文件的源视图中,添加以下的Javascript代码到<form>标签内部,以便在自定义工具栏上添加一个按钮。一旦报表被加载,并在运行时调用exportPDF()函数,此按钮就会被启用:
将以下代码粘贴到.aspx源
<divid="customToolbar"style="display:inline">
<buttondata-bind='enable:PageLoaded,click:exportPDF'style="width:105px;font-size:medium;height:22px;">Export</button>
</div>
3.  在Default.aspx文件的源视图中,添加以下的Javascript代码到viewer_loaded事件处理程序内部,以便将自定义工具栏与内置工具栏安装在一起:
将以下代码粘贴到.aspx源
$('#customToolbar').appendTo(toolbar);
如何将自定义的用户界面绑定到WebViewer的视图模型,并运行该应用程序
1.   添加以下的Javascript代码到viewer_loaded事件处理程序内部,以便将自定义的用户界面绑定到WebViewer的视图模型:
将以下代码粘贴到.aspx源
ko.applyBindings(viewModel, document.getElementById("customToolbar"));
2.   按下F5键以运行该应用程序。
注意:请使用您应用程序中WebViewer控件的实际ID来替换上面的代码段中的'WebViewer1'。

Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat