滑动条方式设置报表参数
根据参数条件来过滤报表或统计图的数据结果，是很常见的报表功能。假定参数查询条件是要求选择某一时间区间，或者选择某一数字区间的时候，我们可以直接为报表设置这样的查询面板，比如，让客户分别输入一个最小数字，一个最大数字，然后点击查询按钮，根据这两个参数值去过滤报表数据。
针对这种应用场景，我们还可以有其他的方法来实现这样的查询面板功能，比如提供一个可拖拽的滑动条，让用户以拖动的方式来设置参数的最值区间。
下面来介绍一个实例，即实现了这样的功能：用滑动块来设置报表参数的最大值和最小值，动态改变统计图的显示数据。
一起先来看看最终的实现效果：
本例的具体实现中，我们用到了Bs_Slider这个js的滑动条控件。Jsp页面具体代码如下：
<%@ page contentType=”text/html;charset=gb2312″ %> <%@ taglib uri=”/WEB-INF/runqianReport4.tld” prefix=”report”%> <%request.setCharacterEncoding( “GBK” );%> <html> <HEAD> <SCRIPT src=”LibCrossBrowser.js” type=text/javascript></SCRIPT> <SCRIPT src=”EventHandler.js” type=text/javascript></SCRIPT> <SCRIPT src=”Bs_FormUtil.lib.js” type=text/javascript></SCRIPT> <SCRIPT src=”Bs_ColorUtil.lib.js” type=text/javascript></SCRIPT> <SCRIPT src=”Bs_Slider.class.js” type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript> <!– //初始化设置滑动条的最大值30，最小值1 min = 1 max = 30
<% //获取报表的最大值，最小值参数,并把参数负值给报表 String A = request.getParameter( “A” ); String B = request.getParameter( “B” );
if(A ==null){A=”0″;} if(B ==null){B=”30″;} String result=”A=”+A+”;B=”+B; %>
A = <%=A%> B = <%=B%>
function setMinMax( mi, ma) { //给滑块设置最大值、最小值 min = mi; max = ma; }
function reload_report() { //用新的最值刷新报表 //alert( document.getElementById(‘slider1knob1′).value +’:’ + document.getElementById(‘slider1knob2′).value ) Av = document.getElementById(‘slider1knob1′).value; Bv = document.getElementById(‘slider1knob2′).value; document.location.href=”slider_demo.jsp?A=”+Av+”&B=”+Bv; } function init() {
//初始化Bs_Slider滑动条控件 if (min==0) min=1 if (max==0) max=30
mySlider3 = new Bs_Slider(); mySlider3.width = 516; mySlider3.height = 56; mySlider3.imgDir = ”; mySlider3.setBackgroundImage(‘background.gif’, ‘no-repeat’); mySlider3.attachOnChange(bsSliderChange);
mySlider3.fieldName = ‘slider3_start’; mySlider3.minVal = min; mySlider3.maxVal = max; mySlider3.valueInterval = 1; mySlider3.valueDefault = A; mySlider3.setSliderIcon(‘slider.gif’, 13, 18); mySlider3.useInputField = 3; mySlider3.styleValueFieldClass = ‘sliderInput’;
mySlider3.useSecondKnob = true; mySlider3.preventValueCrossing = true; mySlider3.wheelAmount = 0; //disable mouse wheeling cause we have 2 knobs.
mySlider3.fieldName2 = ‘slider3_end’; mySlider3.minVal2 = min; mySlider3.maxVal2 = max; mySlider3.valueInterval2 = 1; mySlider3.valueDefault2 = B; mySlider3.setSliderIcon2(‘slider.gif’, 13, 18); mySlider3.useInputField2 = 3; mySlider3.styleValueFieldClass2 = ‘sliderInput’;
mySlider3.colorbar = new Object({type:’between’, color:’red’,offsetLeft:6, height:20, offsetTop:37 }); mySlider3.drawInto(‘sliderDiv3′); }
/** * @param object sliderObj * @param int val (the value) * @param int newPos * @param int knobNo */ //滑动时，记录改变后的最大值最小值 function bsSliderChange(sliderObj, val, newPos, knobNumber) { document.getElementById(‘slider1knob’+knobNumber).value = val; } // –> </SCRIPT> </head> <body topmargin=0 leftmargin=0 rightmargin=0 bottomMargin=0 >
<report:html name=”report1″ reportFileName=”activeButton.raq” width=”-1″ params=”<%=result%>” />
<DIV id=sliderDiv3 style=”BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: 600px; BORDER-BOTTOM: gray 1px solid; HEIGHT: 62px”></DIV>
<table width=600><tr><td align=left> <SCRIPT type=text/javascript>document.write(min); </script> </td><td align=center> <INPUT id=slider1knob1 size=2 name=slider1knob11 value=<%=A%>>
<% if(request.getParameter( “A” ) ==null) out.println(“<SCRIPT type=text/javascript>slider1knob11.value = min ; </script>”); %>日- <INPUT id=slider1knob2 size=2 name=slider1knob21 value=<%=B%>>日
<% if(request.getParameter( “A” ) ==null) out.println(“<SCRIPT type=text/javascript>slider1knob21.value = max ; </script>”); %>
</td><td align=right> <SCRIPT type=text/javascript>document.write(max); </script></td> </table>
<INPUT type = hidden id=slider1knob1 size=2 name=slider1knob1 value=<%=A%>><BR> <INPUT type = hidden id=slider1knob2 size=2 name=slider1knob2 value=<%=B%>><BR> <SCRIPT type=text/javascript>init();</script> </body> </html> |
另外，在raq中，我们还可以把报表数据的最大值，最小值的，传给jsp页面，让滑动条初始化时，可以根据数据，设定滑动标尺本身的边界值。例如：如果月份是2月份时，数据中最大日期是28（也可能是29），那么标尺的最大值边界显示为28。
在报表中，设置一个隐藏单元格，并设置表达式为：
=” <SCRIPT type=text/javascript> setMinMax(“+ ds2.Select(min) + ” , ” + ds2.Select(max)+”) </script>”