Report Studio之JavaScript技巧五、显示/隐藏提示控件

浏览: 2481

现有一张按product lineorder method显示sales quantity的报表。用户需要在product lineorder method上应用过滤,而且每次只需要过滤其中之一。

他们希望可以方便的通过不同的选择显示不同的提示。

 

准备工作

 

使用product linesorder methodssales quantity建立一张列表,并在product linesorder methods上创建两个optional filters

 

如何实施

 

1. 我们从在两个filters上创建prompts开始。为此,添加一张prompt page,然后在此page上添加两个value prompts。使用prompt向导把promptsfilters的参数连接起来。

2. 设置两个prompts的隐藏装饰(Hide Adornment)属性为Yes

3. 添加一个HTML项目到product line prompt前,定义其代码为:

<Input type = radio Name = r1 title= "Click me to select Product Line..." Value = "PL" onclick= "radioSelect(this)">Product Line

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<Input type = radio Name = r1 title= "Click me to select Order Method..." Value = "OM" onclick= "radioSelect(this)">Order Method

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<span id = 'ProductSpan'>

4. 添加一个HTML项目到product line promptorder method prompt之间,定义其代码为:

<span id = 'OrderSpan'>

5. 添加第三个HTML项目到order method prompt后,定义其代码为:

<script>

var fW = (typeof getFormWarpRequest == "function" ?getFormWarpRequest() : document.forms["formWarpRequest"]);

if ( !fW || fW == undefined) { fW = ( formWarpRequest_THIS_ ?formWarpRequest_THIS_ : formWarpRequest_NS_ );}

var theSpan = document.getElementById("ProductSpan");

var a = theSpan.getElementsByTagName('select');

for( var i = a.length-1; i >= 0; i-- )

{ var ProductBox = a[i];

ProductBox.style.display = 'none'; }

theSpan = document.getElementById("OrderSpan");

a = theSpan.getElementsByTagName('select');

for( var i = a.length-1; i >= 0; i-- )

{ var OrderBox = a[i];

OrderBox.style.display = 'none'; }

function radioSelect(rad)

{ if (rad.value == "PL")  /* Hide OrderBox and show ProductBox */

{ ProductBox.style.display = '';

OrderBox.style.display = 'none';

}

else if (rad.value == "OM") /* Hide ProductBox and show OrderBox

*/

{ ProductBox.style.display = 'none';

OrderBox.style.display = '';

}

else /* Hide both controls */

{ ProductBox.style.display = 'none';

OrderBox.style.display = 'none'; }

}

</script>

 

现在报表页面看起来如下图:

Clipboard Image.png

6. 运行并测试报表。我们可以看到两个单选按钮。依选中不同的按钮显示不同的提示。

Clipboard Image.png

工作原理

 

此例包含三部分内容。

首先,我们定义两个单选按钮。这两个按钮完全是我们自定义的,所以我们可以控制选中单选按钮所所对应的动作(OnClick方法)。

接下来,我们使用两个span标签把两个prompts包围起来,这样我们就可以比较方便地俘获它们。

最后,我们编写了一段代码用以控制当选择不同的单选按钮时,显示不同的prompt

 

更多

 

本例中实现的功能,使用conditional block也可以实现。

此例没有设置默认选择。依客户需求不同,可以考虑设置默认选项。具体实现方法,请大家自己研究。

推荐 0
本文由 zhengyi1943 创作,采用 知识共享署名-相同方式共享 3.0 中国大陆许可协议 进行许可。
转载、引用前需联系作者,并署名作者且注明文章出处。
本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台,并不用于任何商业目的,如果有任何问题,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

0 个评论

要回复文章请先登录注册