润乾报表实现移动端报表展现

可直接阅读原文:http://c.raqsoft.com.cn/article/1539050767973?r=alice

在各企业中或者电商平台的商家,业务方,每天都有大量的人需要在线查看大量的指标,用于监控、分析关键业务数据的发展趋势。同时,又有着能够随时随地,方便快捷的查看分析数据的诉求。我们习惯于,使用润乾报表在 PC 端或大屏中展现,但是你知道吗?润乾报表 V2018 是以 HTML5 方式输出,不仅支持在 PC 端展现,也支持在手机端展现,并且在手机端展现时可以在手机端自适应。

png

手机报表已有功能

目前我们提供的手机报表 APP 示例的功能有:钻取、填报表、参数查询、统计图,自适应,长按电话号码拨打电话、扫码、分享报表到微信或 QQ 的功能。

注:长按电话号码拨打电话、扫码、分享的功能是在手机 APP 中有效,只有部分浏览器支持这个功能。

自适应方式

设计器安装目录 reportJsp 目录下提供了 matchReport.jsp, 在这个页面中是通过 reportMatchSize 这个自适应 js 函数实现的自适应功能。

png

js 函数用法说明如下:

reportMatchSize(rongqi, reportdiv, mode)

参数说明:

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

reportdiv  报表所在的 div 对象。

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

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

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

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

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

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

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

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

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

函数功能:让 reportdiv 按照实际尺寸以指定的适应方式与容器 rongqi 的尺寸相匹配适应

说明:自适应功能不适合用于固定表头的报表和折叠报表,也可以在自己写的报表展现页面中添加 reportMatchSize 这个 js 方法实现自适应功能。

具体实例看原文:http://c.raqsoft.com.cn/article/1539050767973?r=alice

作者:shiguang
来源:乾学院
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

猜你喜欢

转载自blog.csdn.net/Alice_656/article/details/84553983