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

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

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

手机报表已有功能

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

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

自适应方式

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

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
来源：乾学院
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。