ActiveReports 支持在设计时和运行时设置报表数据源，本文将重点介绍如何在Html5下使用运行时为RDL/页面报表设置报表数据源。

由于在Html5下使用javascript来加载运行报表，所有运行时绑定数据源的方式也其它类型的工程略有不同。

1.加载报表Viewer

            var viewer = GrapeCity.ActiveReports.Viewer({
                element: '#viewerContainer',
                reportService: {
                    url: '/ActiveReports.ReportService.asmx'
                },
                uiType: 'desktop',
                reportLoaded: function () {
                    reportsButtons.prop('disabled', false);
                }
            });

2.添加button事件

            var reportsButtons = $('#btnReport button');
            reportsButtons.bind('click', function (ev) {
                ev.stopImmediatePropagation();
                reportsButtons.removeClass('active');
                var target = $(ev.target);
                target.addClass('active');
                reportsButtons.prop('disabled', true);
                var reportOption = {
                    id: target.attr('data-bind')
                };
                viewer.option('report', reportOption);
            });

3.重写WebService方法，最主要的是OnCreateReportHandler方法

public class WebService1 : GrapeCity.ActiveReports.Web.ReportService
    {
        PageDocument _pageDocument;
        PageReport definition;
        [WebMethod]
        protected override object OnCreateReportHandler(string reportPath)
        {
            switch (reportPath)
            {
                case "Reports/SalesDetail.rdlx":
                    definition = (PageReport)base.OnCreateReportHandler(reportPath);
                    _pageDocument = new PageDocument(definition);
                    definition.Document.LocateDataSource += new LocateDataSourceEventHandler(Document_LocateDataSource);
                    return definition;
                case "SalesSubDetail":
                    definition = (PageReport)base.OnCreateReportHandler("Reports/" + reportPath + ".rdlx");
                    _pageDocument = new PageDocument(definition);
                    return definition;
                default:
                    return base.OnCreateReportHandler(reportPath);
            }
        }
        void Document_LocateDataSource(object sender, LocateDataSourceEventArgs args)
        {
            string connStr = Server.MapPath("/Data/NWind_CHS.mdb");
            Access dl = new Access(connStr);
            if (args.DataSourceName == "SubDetail" && args.DataSetName == "SubDetailSet1")
            {
                String Id = args.Report.Parameters[0].CurrentValue.ToString();
                string productSql = string.Format("select 产品.产品名称, 产品.单位数量, 订单明细.单价, 订单明细.数量, 订单明细.折扣 from 订单明细 inner join 产品 on 订单明细.产品ID = 产品.产品ID where 订单ID = {0}", Id);
                args.Data = dl.ExecuteDataset(productSql);
            }
            else
            {
                string productSql = string.Format("select 订单.* from 订单");
                args.Data = dl.ExecuteDataset(productSql);
            }
        }
    }

运行截图：

例子下载：