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：
