1. 描述
当一张报表中内容太多，想根据预览的设备不同显示不同的内容，该怎么实现？
2. 思路
根据window.navigator判断是通过APP访问报表还是通过浏览器访问报表；根据访问的报表URL中op是否等于h5，判断是通过PC端的浏览器访问报表还是通过移动端H5预览方式访问报表；根据判断给参数控件赋值，通过条件属性-行高实现不同设备访问显示不同的内容。
注：H5预览方式需要手动点击查询按钮，如不需要判断H5，可将参数面板属性-点击查询前不显示报表内容的勾去掉。
3. 示例
3.1 模板设计
如下图所示设计模板：
3.2 添加参数控件
在参数面板中添加文本控件type和查询控件，并设置文本控件为不可见。
3.3 添加初始化后事件
给文本控件type添加初始化后事件，并添加js代码：
js代码如下：
<span style="color:#334356"><span style="color:#1bc1a1"><img data-cke-saved-src="http://help.finereport.com/js/clipboard/clippy.png" src="http://help.finereport.com/js/clipboard/clippy.png" alt="Copy to clipboard" class="clippy" /><code><span style="color:teal">var</span> self = <span style="color:teal">this</span>;
<span style="color:#999988"><em>/*获取url中的参数*/</em></span>
<span style="color:teal">function</span> <span style="color:#990000"><strong>GetQueryString</strong></span>(name) {
<span style="color:teal">var</span> reg = <span style="color:teal">new</span> <span style="color:#0086b3">RegExp</span>(<span style="color:#dd1144">"(^|&)"</span> + name + <span style="color:#dd1144">"=([^&]*)(&|$)"</span>);
<span style="color:teal">var</span> r = <span style="color:#0086b3">window</span>.location.search.substr(<span style="color:teal">1</span>).match(reg);
<span style="color:teal">if</span>(r != null) <span style="color:teal">return</span> <span style="color:#0086b3">unescape</span>(r[<span style="color:teal">2</span>]);
<span style="color:teal">return</span> null;
}
<span style="color:#999988"><em>/*判断navigator是否定义*/</em></span>
<span style="color:teal">if</span>(!<span style="color:#0086b3">window</span>.navigator) {
self.setValue(<span style="color:#dd1144">'移动端'</span>);
} <span style="color:teal">else</span> {
op = GetQueryString(<span style="color:#dd1144">"op"</span>); <span style="color:#999988"><em>/*获取url中的op参数*/</em></span>
<span style="color:#999988"><em>/*根据op参数判断是H5还是PC端*/</em></span>
<span style="color:teal">if</span>(op == <span style="color:#dd1144">'h5'</span>) {
self.setValue(<span style="color:#dd1144">'H5'</span>);
} <span style="color:teal">else</span> {
self.setValue(<span style="color:#dd1144">'PC端'</span>);
}
}</code></span></span>
3.4 设置条件属性
右击A1单元格，选择条件属性，添加一个条件属性，属性选择行高：0毫米，选择公式，输入公式：type = "移动端"||type="H5"，点击增加。
同理A2、A3单元格也要添加同样的条件属性，只需将A2单元格的条件属性中的公式改为type = "PC端"||type="H5"，将A3的公式改为type="PC端"||type="移动端"。
3.5 保存预览
保存模板，预览效果如下：
