← 返回所有博客文章

下面有分3个步骤来详解HTML5报表浏览器的JavaScript事件方法:

  • 初始化HTML5报表浏览器
HTML5报表浏览器的依赖JQuery等开源框架:
  • jQuery 1.9.0 or higher
  • Bootstrap 3.0
  • Knockout.js 2.3.0 or higher

    可通过CDN添加:

    <link rel="stylesheet" href="GrapeCity.ActiveReports.Viewer.Html.css" >
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js" type="text/javascript"></script>
    <script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js" type="text/javascript"></script>
    <script type="text/javascript">
    </script>
     
    在安装完AR8后,您可在C:\Program Files (x86)\ComponentOne\ActiveReports 8\Deployment\Html文件夹下找到3个文件:
    GrapeCity.ActiveReports.Viewer.Html.css
    GrapeCity.ActiveReports.Viewer.Html.js
    GrapeCity.ActiveReports.Viewer.Html.min.js
    拷贝这3个文件到您的web项目下。
     
    在目标HTML页面,添加DIV元素,为了渲染HTML5报表浏览器:
    <div id="viewer" style="width:600px;height:480px;"></div>    
    这段代码用来初始化HTML5报表浏览器,即DIV元素”viewer”  :
    $(function ()
    {
       var viewer = GrapeCity.ActiveReports.Viewer(
       {
          element: '#viewer',
          report: {
             id: "Report.rdlx"
    
          },
          selectedReportIndex: 0,
    
          reportService: {
             url: '/ActiveReports.ReportService.asmx'
          },
          uitype: 'desktop',
          documentLoaded: function reportLoaded()
          {
             console.log(viewer.pageCount);
          },
          reportLoaded: function (reportInfo)
          {
             console.log(reportInfo.parameters);
          },
    
          error: function (error)
          {
             console.log("error");
          }
    
       });
    });
    • 初始化选项 下面的11个选项(4个回调函数)可在初始化或运行时设置,JavaScript代码分别一一列举如下:

    uiType :用于设置HTML5报表浏览器的UI Mode(类型)

    数据类型: String

    可选值: 'Custom', 'Mobile' , 'Desktop'

    例子:

    viewer.option('uiType', 'Mobile');

     

    element:指定承载HTML5的浏览器控件的元素的jQuery选择器。

    备注:该选项仅适用于初始化阶段。

    数据类型: String

    例子:

    var viewer = GrapeCity.ActiveReports.Viewer(
    {
       element: '#viewerContainer2',
       reportService: {
          url: '/ActiveReports.ReportService.asmx'
       },
    });
  • reportService: 报表服务器地址(ActiveReports Server、ActiveReports Web Report Service )

    数据类型: Object(url、securityToken[可选]、resourceHandler[可选])

    例子:

    reportService: {
       url: 'http://remote-ar-server.com',
       securityToken: '42A9CD80A4F3445A9BB60A221D042FCC',  --登陆AR8 server用
       resourceHandler: 'http://remote-ar-server.com/resourceHandler.aspx' --AR8 Server 资源处理
    };

    report :加载报表的信息(ActiveReports Server、ActiveReports Web Report Service )。

    数据类型: object(id、parameters).

    例子:

    report: {
       id: 'CustomersList',
       parameters: [
       {
          name: 'CustomerID',
          value: 'ALFKI'
       }]
    };

    {name, value} 键值对参数值用于返回报表.

     

    reportLoaded:HTML5报表浏览器收到请求后,返回reportInfo对象,包含(TOC信息、参数信息、渲染链接信息)

    数据类型: function(reportInfo)  回调函数

    Example:

    reportLoaded: function (reportInfo)
    {
       console.log(reportInfo.parameters);
    }; 
     

    action :当HTML5报表浏览器点击超链接(hyperlink)、书签链接(bookmark link)、跳转(drill down )、报表控件是否可见(toggles )操作触发该回调函数.

    数据类型: function(actionType, actionParams) 回调函数

    例子:

    function onAction(actionType, actionParams)
    {
       if (actionType === 0)
       {
          window.open(params.url, "Linked from report", "height=200,width=200");
       }
    }
    viewer.option('action', onAction);  
  • availableExports:用于指定导出的类型。默认PDF、Word、Image、Mht、Excel均可导出。

    数据类型: Array

    例子:

    viewer.option("availableExports", ['Pdf']);  

     

    maxSearchResults :一次搜索最多返回的结果个数.

    数据类型: Number

    例子:

    maxSearchResults: 10

    error :当报表呈现过程出错,则触发该回调函数。

    数据类型: function(error) ,回调函数

    例子:

    function onError(errorInfo)
    {
       console.log(errorInfo);
       return true;
    };

    documentLoaded :当文档完全被加载后,触发该回调函数。

    数据类型: function() ,回调函数

    例子:

    documentLoaded: function ()
    {
       setPaginator();
    }; 
     

    localeUri :本地化字符链接文件。


    备注:该选项仅适用于初始化阶段。

    数据类型: String

    例子:

    var viewer = GrapeCity.ActiveReports.Viewer(
    {
       localeUri: 'Scripts/i18n/ru.txt'
    });

    • API函数和属性接口
    在HTML5报表浏览器经过初始化后,可使用如下的API函数和属性接口进行操作。

    Methods

    option: 通过名称Gets 或 sets 选项的值.

    语法: option(name,[value]) Object

    参数:

    • name: option 名称.
    • value: [可选] 设置的值。如不输入Value,则返回当前已经设置的值.

    例子:

    viewer.option('uiType', 'mobile');
    viewer.option('report', {
       id: 'my report'
    });

    返回值: 当前设置的值.

    refresh:当前预览报表进行刷新

    语法: option(name,[value])Object

    例子:

    viewer.refresh()
    

    返回值: Void

    print:打印当前报表

    语法: print()Void

    例子:

    viewer.print()

    返回值: Void

    goToPage:跳转到指定页面报表(可选的进行offset,如果执行则返回回调CallBack)

    语法: goToPage(number, offset, callback)Void

    参数:

    • number: 跳转指定页面号码.
    • offset object:  {left:12.2, top:15}.
    • callback: 跳转成功后的回调函数.

    例子:

    viewer.goToPage(1, {
       2, 3
    }, function onPageOpened()
    {});

    返回值: Void

    backToParent:回到向下钻取的报表的上一级报表页面

    语法: backToParent()Void

    例子:

    viewer.backToParent()

    返回值: Void

    destroy:删除报表所有元素

    语法: destroy()Void

    例子:

    viewer.destroy()

    返回值: Void

    export:导出当前报表

    语法: export(exportType,callback,saveAsDialog,settings) Void

    参数:

    • exportType: 导出格式.
    • callback: 导出成功后回调函数 (含Url).
    • saveAsDialog: 导出对话框是否出现.
    • settings: 导出设置.

    例子:

    viewer.export('Word', function ()
    {
       console.log('export callback');
    }, true, {
       FileName: 'Document.doc'
    })

    返回值: Void

    search:报表内容搜索

    语法: search(searchTerm, searchOptions, callback)Void

    参数:

    • searchTerm: 搜索字符串.
    • searchOptions: 搜索的选项:
      • matchCase: 大小写匹配.
      • wholePhrase: 全字匹配.
    • callback: 搜索结果回调函数.

    例子:

    viewer.search('a', {
       matchCase: true,
       wholePhrase: false
    }, function (results)
    {
       console.log(results);
    });

    返回值: Void

    getToc:报表目录点击回调函数

    语法: getToc(callback) Void

    参数:

    • callback: 目录点击事件回调.

    例子:

    viewer.getToc(function (toc)
    {
       console.log(toc);
    })

    返回值: Void

    Properties

    pageCount:获得当前报表的总页数

    语法: viewer.pageCount

    例子:

    console.log(viewer.pageCount)

    返回值: 数值.

    currentPage:获得报表当前呈现的页面号码

    语法: viewer.currentPage

    例子:

    console.log(viewer.currentPage)

    返回值: 数值.

    Toolbar:获得工具栏的HTML元素

    语法: viewer.Toolbar

    例子:

    // Toolbar, MobileToolbarTop, MobileToolbarBottom
    $(viewer.toolbar).hide();
    $(viewer.toolbarTop).hide();
    $(viewer.toolbarBottom).hide();