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