JS实现根据不同设备显示不同内容

1.1 问题描述

当一张报表中内容太多，想根据预览的设备不同显示不同的内容，该怎么实现？如下图所示，模板在移动端和 PC 端预览时，展示内容不同。

1.2 实现思路

1）通过 JS 来判断当前是浏览器是 PC 端还是移动端，并将判断结果传回报表。

2) 根据传回的浏览器结果，利用条件属性的来设置报表的行高，从而达到根据当前设备类型显示对应内容的效果。

2.1 模板设计

新建一个普通报表，设计模板。如下图所示：

2.2 添加参数控件

在「参数面板」中添加文本控件 type 和「查询按钮」，并设置文本控件为不可见。如下图所示：

2.3 添加事件

给「文本控件」type 添加一个「初始化后」事件，如下图所示：

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"); /*获取op参数对应的值是什么模式*/ /*根据op参数判断是H5还是PC端*/
	if (op == 'h5') {
		self.setValue("H5");
	} else {
		self.setValue("PC端");
	}
}

2.4 设置条件属性

1）右击 A1:D8 单元格，选择条件属性，添加一个条件属性。属性选择行高：0 毫米；选择公式，内容：nvl(type,"H5") = "H5"

条件属性内容为根据返回的设备端参数，隐藏一部分内容。如下图所示：

2）同理 A10:D14 单元格也要添加同样的条件属性，对应的公式： nvl(type, "H5") = "移动端"

2.5 效果预览

保存模板，PC 端预览效果如下图所示：

H5 预览效果如下图所示：

已完成模板可参考：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\JS实现根据不同设备显示不同内容.frm

点击下载模板：JS实现根据不同设备显示不同内容.cpt