ReportViewer控件功能扩展

最近在使用Report Service做报表,客户要求报表要以表格形式和图形形式显示,当时我想直接修改ReportViewer的工具栏。于是上网查了相关资料,发现这样方案不太可能,就算能够动态增加按钮,但是对于后台处理也比较麻烦,从通用性上考虑也不太乐观。

后来看到客户端的代码,如下:

ReportViewer发到客户端其实就是div加table。突然萌生了一种想法,就是通过js前台动态加按钮,然后回传给服务器处理。

实现效果图:

前台脚本使用的是jQuery,选择jQuery的原因有两个:一、使用起来简单;二、浏览器兼容性支持的好。

为了这段代码通用,开发人员用起来方便,利用了jQuery的($.extend())功能。

插件代码如下:

//ReportViewer控件增加工具按钮
(function() {
    $.extend($.fn,
            {
                methods: {
                    createButton: function(width, height, type, uri, controlId) {
                        var A = $("<a></a>");
                        A.attr("id", type + "_" + "graph");
                        A.attr("href", "###");
                        A.attr("uri", uri);
                        A.css("margin-left", "5px");
                        var img = $("<img />");
                        img.attr("src", "../img/" + type + ".png");
                        img.css("width", width);
                        img.css("height", height);
                        img.css("margin-top", "4px");
                        A.prepend(img);
                        A.click(function() {
                            $("input[id$='hid" + controlId + "']").val($(this).attr("uri"));
                            var lb = $("a[id$='lb" + controlId + "']");
                            __doPostBack(lb.attr("id").replace(/_/g, "$"),'');
                        });
                        return A;
                    }
                },
                ReportViewAddTool: function(options) {
                    options = $.extend({ width: 15, height: 15, url: { table: "###" }, controlId: "CallBack" }, options);
                    //按钮图片的宽度与高度
                    var width = options.width;
                    var height = options.height;
                    var url = options.url;
                    var controlId = options.controlId;
                    var toolbar = $(this).children("div").eq(0);
                    //创建图片按钮的div
                    var div = $("<div id='divRVT'></div>");
                    div.css({ "display": "inline", "font-family": "Verdana", "height": "30px", "font-size": "8pt" });
                    $.each(url, function(k, v) {
                        div.prepend($.fn.methods.createButton(width, height, k, v, controlId));
                    });
                    toolbar.children("div").eq(0).append(div);
                }

            }
    );
})(jQuery);

客户端实例代码:

<script type="text/javascript">
        $(function() {
            $(".reportTool").ReportViewAddTool({ url: { table: "SettleSheetRecycleStatistic", column: "SettleSheetRecycleStatisticGraph"} });
        });
</script>
<div class="divReportV">
        <rsweb:ReportViewer ID="rvPayPlan" runat="server" Width="1000px" Height="390px" Visible="true"
            CssClass="reportTool">
        </rsweb:ReportViewer>   
    <asp:HiddenField ID="hidCallBack" runat="server" />
        <asp:LinkButton ID="lbCallBack" runat="server" OnClick="lbCallBack_Click"></asp:LinkButton>     
</div>

报表实现的核心思想就是aspx页面通过ReportViewer控件去请求不同的rdl报表文件去显示不同的报表,这些报表可以是图形报表或表格报表。

见上代码核心的方法就两个ReportViewAddTool和createButton,ReportViewAddTool方法是提供给用户使用的接口,createButton是内部用来创建按钮的。

createButton: function(width, height, type, uri, controlId)

width:图片按钮的宽度

height:图片按钮的高度

type:报表类型(表格、柱状图、饼状图、线状态等等)

uri:每种报表类型对应的rdl文件名

controlId:回发控件的Id

这个方法实现细节主要是图片、A标签的构建。当时在实现的时候遇到了一个头疼的问题,就是A.Click事件回传服务器的时候,那个服务器端控件(LinkButton)触发不了,一般通过js提交是通过__doPostBack方法。因为在实际项目中,我们做的页面不是简单的页面,有可能是有模板页,有可能是用户控件等等。所以有些控件的ID发到客户端会改变。

A.click(function() {
                            $("input[id$='hid" + controlId + "']").val($(this).attr("uri"));
                            var lb = $("a[id$='lb" + controlId + "']");
                            __doPostBack(lb.attr("id").replace(/_/g, "$"),'');
});

上面代码就是解决父子控件问题的,解决的思想就是:不管它的id怎么变,它们都是以最初的id为结尾的。通过jQuery强大的选择器很容易就可以找到元素。

细心的朋友会发现lb.attr("id").replace(/_/g, "$")这段代码,功能是将客户端的id中的”_”符号替换成”$”字符。这段代码很重要,要不然服务器端方法触发不了(控件存在于父控件中)。

下面谈谈提供给用户的接口:

ReportViewAddTool: function(options) {
                    options = $.extend({ width: 15, height: 15, url: { table: "###" }, controlId: "CallBack" }, options);
}

调用方法

 $(".reportTool").ReportViewAddTool({ url: { table: "SettleSheetRecycleStatistic", column: "SettleSheetRecycleStatisticGraph"} });

这边为了简单起见只生成了表格类型的按钮(table)和状图案类型的按钮(column)。

引号里的内容是rdl文件名(回发时请求不同的报表内容)

 

 

在页面设计中,另外需要使用两个控件:隐藏域控件(用于保存rdl文件名,供服务器端处理使用)和LinkButton控件(担任Handler角色,处理用户请求)

<asp:HiddenField ID="hidCallBack" runat="server" />
        <asp:LinkButton ID="lbCallBack" runat="server" OnClick="lbCallBack_Click"></asp:LinkButton>  

隐藏控件为了保存rdl文件名,LinkButton用于触发后台方法。

实现效果图:

图1:

图2:

转载于:https://www.cnblogs.com/gates-li/archive/2012/09/20/2694967.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值