历史版本2 :JS实现根据不同设备显示不同内容 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:
1. 描述

当一张报表中内容太多,想根据预览的设备不同显示不同的内容,该怎么实现?

2. 思路

根据window.navigator判断是通过APP访问报表还是通过浏览器访问报表;根据访问的报表URL中op是否等于h5,判断是通过PC端的浏览器访问报表还是通过移动端H5预览方式访问报表;根据判断给参数控件赋值,通过条件属性-行高实现不同设备访问显示不同的内容。

注:H5预览方式需要手动点击查询按钮,如不需要判断H5,可将参数面板属性-点击查询前不显示报表内容的勾去掉。

3. 示例

3.1 模板设计

如下图所示设计模板:
222

3.2 添加参数控件

在参数面板中添加文本控件type查询控件,并设置文本控件为不可见
222

3.3 添加初始化后事件

给文本控件type添加初始化后事件,并添加js代码:

222
js代码如下:

var self = this; /*获取url中的参数*/ function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r != null) return unescape(r[2]); return null; } /*判断navigator是否定义*/ if(!window.navigator) { self.setValue('移动端'); } else { op = GetQueryString("op"); /*获取url中的op参数*/ /*根据op参数判断是H5还是PC端*/ if(op == 'h5') { self.setValue('H5'); } else { self.setValue('PC端'); } }

3.4 设置条件属性

右击A1单元格,选择条件属性,添加一个条件属性,属性选择行高:0毫米,选择公式,输入公式:type = "移动端"||type="H5",点击增加
222

同理A2、A3单元格也要添加同样的条件属性,只需将A2单元格的条件属性中的公式改为type = "PC端"||type="H5",将A3的公式改为type="PC端"||type="移动端"

3.5 保存预览

保存模板,预览效果如下:

222

222