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

编辑
  • 文档创建者:cherishdqy
  • 浏览次数:767次
  • 编辑次数:6次
  • 最近更新:Kevin-s 于 2019-06-22
  • 1. 描述

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


    2. 思路

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

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


    3. 示例

    3.1 模板设计

    如下图所示设计模板:


    3.2 添加参数控件

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


    3.3 添加初始化后事件

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


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

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


    3.5 保存预览

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





    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]