根据设备不同显示不同内容

1. 描述

 

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

 

2. 思路

 

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

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

 

3. 示例

 

 

3.1 模板设计

 

如下图所示设计模板：

 

3.2 添加参数控件

 

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

 

3.3 添加初始化后事件

 

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

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"，点击增加。

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

3.5 保存预览

 

保存模板，预览效果如下：