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;
        }