ReportViewer，RDLC 报表开发之个性化样式

报表开发中，客户对样式提出了要求：

1.工具栏上显示每页条数

2.只导出Excel，不需要下拉菜单。

3.报表上显示的图表，分页时，每页都要显示，但导出后，图表是一个，且都在最下面。

 

另外的功能点:

4.每页显示标头 

5.标题行和 奇偶行样式 

 

解决方案： 

1.工具栏上显示每页条数

　　搜索无果后(RportViewer 没提供类似的功能吧.),暴力解决.好像网上也有类似的方案.

    /// <summary>
    /// 给报表添加每页条数. Udi 2012年3月2日
    /// </summary>
    /// <param name="Report"></param>
    /// <param name="hdPageSize"></param>
    public static void AddPageSize(this ReportViewer Report, HtmlInputHidden hdPageSize, Control Button)
    {
        var toolBar = FindToolBar(Report.Controls, "Microsoft.Reporting.WebForms.ToolbarControl"); 
        
        //第1个是页码组,第2个是缩放组. 有依赖性.
        var zoomGroup = toolBar.Controls[1];

        var label = new LiteralControl();
        label.ID = "lab_PageSize";

        var items = new int[] { 5, 10, 20, 50 };
        var options = new List<string>();
        for (int i = 0; i < items.Length; i++)
        {
            options.Add(string.Format(@"<option value='{0}' {1}>{0}</option>", items[i], hdPageSize.Value == items[i].ToString() ? "selected" : ""));
        }

        label.Text = string.Format(@"每页条数: <select onchange=""{0}"" style='width:40px'>{1}</select>",
            string.Format(@"(function(item){{$('#{0}').val($(item).val()); $('#{1}').trigger('click');}})(this);",
            hdPageSize.ClientID,
            Button.ClientID),
            string.Join("", options.ToArray()));
        zoomGroup.Controls.AddAt(0, label);
    }



    private static Control FindToolBar(ControlCollection ReportControls, string FullTypeName)
    {
        foreach (Control item in ReportControls)
        {
            if (item.ToString() == FullTypeName) return item;
            if (item.HasControls())
            {
                var subFind = FindToolBar(item.Controls, FullTypeName);
                if (subFind != null) return subFind;
            }
        }
        return null;
    }

 

调用: (hdPageSize 是一个保存每页条数是Hidden, btnSearch 是 查询按钮, 需要模拟点击)

this.ReportViewer1.AddPageSize(this.hdPageSize, this.btnSearch);

2. 只导出Excel，不需要下拉菜单。

思路和上面差不多，索性写的方法再通用一点。

    /// <summary>
    /// 给 ReportViewer 添加控件.
    /// </summary>
    /// <param name="Report"></param>
    /// <param name="GroupIndex">组索引</param>
    /// <param name="ControlIndex">组内控件索引</param>
    /// <param name="Control"></param>
    public static void AddToolControl(this ReportViewer Report, int GroupIndex, int ControlIndex, Control Control)
    {
        var toolBar = FindToolBar(Report.Controls, "Microsoft.Reporting.WebForms.ToolbarControl"); 

        var zoomGroup = toolBar.Controls[GroupIndex];


        zoomGroup.Controls.AddAt(ControlIndex, Control);
    }

 

调用：（第一个索引，表示组索引， 第二个索引表示组内控件索引）

this.ReportViewer1.AddToolControl(5, 0, new LiteralControl() { Text = string.Format(@"<a class='expBtn' onclick=""document.getElementById('{0}').click();"">导出</>", this.btn_Excel.ClientID) });

 

3. 报表上显示的图表，分页时，每页都要显示，但导出后，图表是一个，且都在最下面。

之前是一个页面上绑定了一个 ReportViewer , 一个 RDLC . 两个数据源(一个用于分页, 一个用于出图. 其实没必要啊.反正也要取所有数据出图表,应该用一个全量数据源即可.这样做,多多少少受了分页方案的影响.),效果是 只在最后一页显示图表.

把 RDLC 拆成三部分. 

第一部分: 数据+图表.  (导出用.)

第二部分: 数据
第三部分: 图表

 

页面上添加两个 ReportViewer 

第一个: 显示数据

第二个: 显示图表 (隐藏工具栏)

看起来像一个.

 

显示时, Report_Data 绑定 RDLC_Data , Report_Chart 绑定 RDLC_Chart . 

导出时, 使用 Report_Data 绑定 RDLC_Data_Chart .

即可. 

 

4. 每页显示标题的设置方法:

RDLC 文件视图中: 选  列组, 点 高级模式 , 行组出现 静态(二级样式) . 在根静态上 f4, 设置:

KeepWithGroup: After

RepeateOnNewPage:True

属性表里选 : Tablix，设置：

RepeatColumnHeaders ： True

RepeatRowHeaders ： True

5.标题样式好说, 奇偶行样式设置

 先中行,在 BackGroundColor 属性里设置表达式:

=IIF( ( RowNumber( Nothing ) +Fields!SysPageIndex.Value ) Mod 2 =1  ,  "#eeeeee" , "#fff")

注： RowNumber( Nothing ) 表示行号。

 

6.导出事件

        $find('ReportViewer1')._getInternalViewer().ExportReport = function (format) {
            if (this.ExportUrlBase == null)
                return false;
            var format = encodeURIComponent(format).toLowerCase();
            switch (format) {
                case "excel":
                    document.getElementById("<%= btn_Excel.ClientID%>").click();
                    break;
                case "pdf":
                    document.getElementById("<%= btn_PDF.ClientID%>").click();
                    break;
                case "word":
                    document.getElementById("<%= btn_Word.ClientID%>").click();
                    break;
            }
            return true;
        }