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

2018/01/15 00:13
阅读数 87
原文: 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;
        }

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部