报表自适应函数

阅读(620) 标签: 自适应, js函数,

为帮助用户处理对报表在电脑和手机上展现时可根据屏幕的大小进行自适应的需求,润乾报表提供了报表自适应JS函数。

自适应功能不适合用于固定表头的报表和折叠报表。

函数说明

reportMatchSize( rongqi, reportdiv, mode )

描述:

报表所在的div对象reportdiv按照实际尺寸以指定的适应方式mode与容器rongqi的尺寸相匹配适应。

横屏定义为容器宽度大于高度,竖屏定义为容器高度大于宽度。

 

参数说明:

    rongqi  页面中的html容器元素(div,td),报表将按此容器尺寸进行匹配适应

    reportdiv  报表所在的div对象

    mode    自适应方式,有以下8种取值

      0  按设计尺寸展现,不用适应容器。

      1  始终用报表宽度适应容器宽度,报表高度同比例缩放

      2  始终用报表高度适应容器高度,报表宽度同比例缩放

      3  竖屏时,相当于mode=2;横屏时,相当于mode=1

      4  竖屏时,相当于mode=1;横屏时,相当于mode=2

      5  竖屏时,报表高和宽均分别适应容器的高和宽;横屏时,不需适应容器

      6  竖屏时,不需适应容器;横屏时,报表高和宽均分别适应容器的高和宽

      7  报表高和宽均分别适应容器的高和宽

  

用法说明

在展现报表的jsp中,需要写一个js函数来调用系统提供的reportMatchSize函数实现自适应功能,在页面加载完成时和窗口大小改变时调用。[产品安装目录]/report/web/webapps/demo/reportJsp目录下的matchReport.jsp为示例文件,也可参考如下内容所示:

<script language="javascript">

… …

function matchReport() {

    reportMatchSize( document.getElementById( "reportContainer" ), document.getElementById( "report1_reportDiv" ), <%=match%> );

  }

 

  $(document).ready( function(){

    matchReport();

  });

  </script>

注意:  

由于在手机上当屏幕横竖方向变化时,系统要重新调用用户写的自适应函数,因此我们规定,用户写的用于手机上的自适应函数名固定名称为matchReport(),没有函数参数。