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

目录:

1. 描述编辑

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


2. 思路编辑

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

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


3. 示例编辑

3.1 模板设计

如下图所示设计模板:
222


3.2 添加参数控件

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


3.3 添加初始化后事件

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

222
JavaScript 代码如下:

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