报表模板实现网格式自定义报表
需求描述:
一般报表模板设计的报表都是固定格式和字段的报表,如果要修改列字段或者排列顺序,需要设计人员修改报表模板。用户需求为可以选择预添加的字段,并且可以增删,最终根据用户选择,生成结果报表,实现web端报表结果自定义功能。如下图所示。
报表实现:
下面例子实现四列的自定义网格式报表。
参数表单:
利用参数,前端js,隐藏行属性等,为用户提供报表自定义的参数页面,用户可以添加或删除报表的列,并选择列字段。
参数模板:param.raq
参数配置:
num,整数,主要用于记录已添加的行,初值为1。
数据集:建立内建数据集,A,B,C,D分别表示四列的可选字段。
报表模板设计:
报表模板设计重点主要包括一些几点
1. 该报表可以填报,并且B2,B3,B4,B5可写,web变量名分别为col1,col2,col3,col4。
2. 设置隐藏行属性,第3,4,5行都需要设置隐藏行属性,设置的方式相同。以第2行为例,隐藏行属性表达式为if(num>=2,false,true),表示如果当前以添加的列(num)大于等于2时,当前行是不隐藏的,否则隐藏该行。
3.下拉编辑风格设置
B2,B3,B4,B5提供下拉数据集的编辑风格,分别绑定ds1的A、B、C、D字段,并且提供动态过滤功能。B3下拉项不包括B2的选择项,B4下拉项不包括B2和B3的选择项,依以此类推。
B2,B3的下拉数据集填报风格设置如下,B4,B5类似。
4 添加超链接属性,利用js实现添加删除参数表单中的列选择。
C2单元格添加了”超链接属性”:”javascript:add_col(“+A1+”)”,其中A1单元格值为num+1,表示的要添加的列数。调用页面js的函数add_col完成列添加。
C3,C4,C5单元格同样需要添加”超链接属性”,以C3单元格为例,单元格表达式为: =if(num==2,”删除”,”"),如果参数num为2,值为删除,否则为空。超链接属性设置如下图,”javascript:del_col(2,’col2′)” ,调用页面js的函数del_col完成列删除。
Js函数:
add_col(num) 添加列选择,实际上是刷新当前页,传递参数值num,num的值是要添加的列,根据这个num值可以控制参数表单某些行是否隐藏,如num=2时,第3行显示,4,5行隐藏。
del_col(num,col) 删除列选择,实际上也是刷新页面,传递参数num和指定的参数值。如要删除第3行,那么调用”javascript:del_col(2,’col2′)”,最终转向页面showParams.jsp?num=1&col2=,实现效果是隐藏了第三行并且清空了”第二列”(B3)的选择项
<script type=”text/javascript”>
function add_col(num)
{
doPostBack(form1,’showParams.jsp?num=’+num);
}
function del_col(num,col)
{
var num1=num-1;
doPostBack(form1,’showParams.jsp?num=’+num1+’&’+col+’=');
}
//指定提交页面的url
function doPostBack(formObj,actionFile){
formObj.action=actionFile;
formObj.submit();
}
</script>
结果模板:result.raq
利用动态宏实现单元格表达式的动态变化。
参数设置:
分别接收来自于参数模板的4个列选择。
宏设置:
Macro1:if(col1!=null&&col1!=”",”ds1.select(“+col1+”)”,null)
Macro2:if(col2==null ,”",col2==”",”",”ds1.”+col2)
Macro3:if(col3==null ,”",col3==”",”",”ds1.”+col3)
Macro4:if(col4==null ,”",col4==”",”",”ds1.”+col4)
数据集:
注意数据集的设置需要包含所有参数模板里面选择的列,这里取出了所有字段。
报表模板设计:
其中A1,B1,C1,D1代表表头的字段描述,接收对应列名参数col1,col2,col3,col4。
A2根据宏计算动态生成单元格表达式,如果col1为空,表达式为空,如col1为”产品名称
“,表达式就变为ds1.select(产品名称)。B2,C2,D2也是类似,根据宏生成表达式。
小结:
本例利用宏,参数,隐藏行,js实现了比较灵活的自定义报表,打破了报表模板设计只能设计固定格式报表的限制,增强了和终端用户的交互,说明灵活的应用润乾提供的属性功能可以组合设计出更灵活多变的报表。
具体实现可以参考附件。