润乾报表默认提供了很多种填报编辑风格，如下拉树，下拉列表框，复选框等等，同时润乾报表也开放了编辑风格的扩展接口，用户可以根据具体需求定制开发多样化的编辑风格。具有拖拽功能的编辑界面，允许用户使用鼠标选择某个对象并在屏幕上进行移动，这样用户可在列表之间拖放选择数据，能够使界面操作友好性得到提升。本文介绍如何利用自定义编辑风格实现在查询表单中应用flex拖拽控件。

 

一:FLEX列表类控件的拖放行为：

在flex中，很多列表控件已经包含了拖放操作的定义，只需要在定义组件中的一些属性就可以实现拖放行为。

下面介绍本文中用到的拖拽列表的实现：

1. 初始化列表数据源：

private function initApp():void {

srclist.dataProvider =

new ArrayCollection(['选项A', '选项B', '选项C', '选项D', '选项E']);

destlist.dataProvider = new ArrayCollection([]);

}

2. 定义数据源列表和目标列表，分别放置待选择拖拽的数据及被放置数据：

<mx:List id="srclist"

allowMultipleSelection="true"

dragEnabled="true"

dragMoveEnabled="true"

dropEnabled="true"/>

<mx:List id="destlist"

dropEnabled="true"

dragMoveEnabled="true"

dragEnabled="true"/>

二．报表设计中使用自定义拖拽控件

1. 建立查询表单，在填报单元格中使用自定义控件：

 

 

 

2. 自定义控件显示和隐藏的js函数show(),hidden()，需要在报表设计发布的jsp中定义。

Parent.jsp部分代码如下：

<script type="text/javascript">

//自定义控件显示

function show()

{

var cell = event.srcElement;

onOpenWindow(cell.id);

}

//自定义控件隐藏

function hidden()

{

//这里可添加其他处理代码

}

//打开模式窗口，模式窗口中显示child.html即为拖拽控件所在页面

function onOpenWindow(obj){ //showModalDialog的第二个参数是传递给子窗口的值，该函数返回的值是从子窗口传递过来的值。

//在子窗口可以通过window.dialogArguments方法获取

//如果不需要传递，这个参数就用window本身，本例中没有传递参数给子窗口

var location="dialogLeft:"+window.event.screenX +"px;dialogTop:"+window.event.screenY+"px;dialogWidth:400px;dialogHeight:400px"

var result = window.showModalDialog("child.html",window,location);

//利用从子窗口的传递值刷新父窗口，父窗口可以执行查询

if(result != null){

window.location="parent.jsp?arg1="+ result[0];

}

}

</script>

……

<table id="param_tbl" align="center"><tr><td>

<report:param name="form1" paramFileName="report_arg.raq"

needSubmit="no"

params="<%=param.toString()%>"

 

/>

</td></tr><tr>

<td><a href="javascript:_submit( form1 )"><img src="../p_w_picpaths/query.jpg" border=no style="vertical-align:middle"></a></td>

</tr></table>

<table align="center">

<tr><td>

<report:html name="report1" reportFileName="report.raq"

funcBarLocation=""

needPageMark="yes"

generateParamForm="no"

params="<%=param.toString()%>"

exceptionPage="/reportJsp/myError2.jsp"

width="-1"

 

/>

</td>

</tr></table>

 

3. 在模式窗口中显示拖拽控件, 在需要嵌入FlEX拖拽列表的HTML代码中使用<object>和<embed>标签来调用控件，代码如下：

 

<object id='mySwf'

classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/

flash/swflash.cab#version=9,0,0,0' height='400' width='400'>

<param name='src' value='../Communicate-debug/ListtoListMove.swf'/>

<param name='flashVars' value=''/>

<embed name='mySwf' src='../Communicate-debug/ListtoListMove.swf'

pluginspage='http://www.macromedia.com/shockwave/download/

index.cgi?P1_Prod_Version=ShockwaveFlash'

height='100%' width='100%' flashVars=''/>

</object>

注意因为模式窗口最终要返回拖拽列表中目标列表中的选择项，当用户拖拽完成，点击确定时需要将选择结果返回给报表，故需要完成flex控件和外部程序的交互。在flex中可以获得外部HTML代码中的JavaScript函数，这样就可以从flex传递到外部页面供报表调用了。

首先我们在外部包装的html页面上定义javascript函数，其功能是将参数返回给主报表页面，并关闭模式窗口。

<SCRIPT LANGUAGE="JavaScript">

function onOK(a){

var runValue=new Array;

alert(a);

runValue[0]=a;

window.returnValue = runValue;

window.close();

}

</SCRIPT>

接下来我们需要在FLEX控件的MXML代码中定义“确定”按钮，调用ActionScript中的callWrapper()函数以调用外部包装的javascript函数onOK()。

<mx:Script>

import flash.external.*;

public function callWrapper():void {

var s:String;

if (ExternalInterface.available) {

var wrapperFunction:String = "onOK";

s = ExternalInterface.call(wrapperFunction,destlist.dataProvider.toString());

} else {

s = "Wrapper not available";

}

trace(s);

}

</mx:Script>

 

 

三、实现效果：

1.查询表单中单击单元格打开拖拽选择窗口：

 

 

2.拖拽完成后点击OK，返回报表查询页面，并返回拖拽选择的查询参数。

 

 
 
分享 分享 | 评论 ( 0) | 阅读 ( 19) | 固定链接 | 类别 ( 润乾报表) | 发表于 11:23
提示：“固定链接”为您显示此篇文章的固定不变链接，如果您有还有疑问请点击帮助
链接地址： http://knowledgewang.blog.sohu.com/213106384.html 复制此地址
 
 
 

评论 想第一时间抢沙发么？

 
 
 
 
 
由于最近广告泛滥，暂只允许登录用户对此文评论。 登录
 
 
 

润乾报表默认提供了很多种填报编辑风格，如下拉树，下拉列表框，复选框等等，同时润乾报表也开放了编辑风格的扩展接口，用户可以根据具体需求定制开发多样化的编辑风格。具有拖拽功能的编辑界面，允许用户使用鼠标选择某个对象并在屏幕上进行移动，这样用户可在列表之间拖放选择数据，能够使界面操作友好性得到提升。本文介绍如何利用自定义编辑风格实现在查询表单中应用flex拖拽控件。

 

一:FLEX列表类控件的拖放行为：

在flex中，很多列表控件已经包含了拖放操作的定义，只需要在定义组件中的一些属性就可以实现拖放行为。

下面介绍本文中用到的拖拽列表的实现：

1. 初始化列表数据源：

private function initApp():void {

srclist.dataProvider =

new ArrayCollection(['选项A', '选项B', '选项C', '选项D', '选项E']);

destlist.dataProvider = new ArrayCollection([]);

}

2. 定义数据源列表和目标列表，分别放置待选择拖拽的数据及被放置数据：

<mx:List id="srclist"

allowMultipleSelection="true"

dragEnabled="true"

dragMoveEnabled="true"

dropEnabled="true"/>

<mx:List id="destlist"

dropEnabled="true"

dragMoveEnabled="true"

dragEnabled="true"/>

二．报表设计中使用自定义拖拽控件

1. 建立查询表单，在填报单元格中使用自定义控件：

 

 

 

2. 自定义控件显示和隐藏的js函数show(),hidden()，需要在报表设计发布的jsp中定义。

Parent.jsp部分代码如下：

<script type="text/javascript">

//自定义控件显示

function show()

{

var cell = event.srcElement;

onOpenWindow(cell.id);

}

//自定义控件隐藏

function hidden()

{

//这里可添加其他处理代码

}

//打开模式窗口，模式窗口中显示child.html即为拖拽控件所在页面

function onOpenWindow(obj){ //showModalDialog的第二个参数是传递给子窗口的值，该函数返回的值是从子窗口传递过来的值。

//在子窗口可以通过window.dialogArguments方法获取

//如果不需要传递，这个参数就用window本身，本例中没有传递参数给子窗口

var location="dialogLeft:"+window.event.screenX +"px;dialogTop:"+window.event.screenY+"px;dialogWidth:400px;dialogHeight:400px"

var result = window.showModalDialog("child.html",window,location);

//利用从子窗口的传递值刷新父窗口，父窗口可以执行查询

if(result != null){

window.location="parent.jsp?arg1="+ result[0];

}

}

</script>

……

<table id="param_tbl" align="center"><tr><td>

<report:param name="form1" paramFileName="report_arg.raq"

needSubmit="no"

params="<%=param.toString()%>"

 

/>

</td></tr><tr>

<td><a href="javascript:_submit( form1 )"><img src="../p_w_picpaths/query.jpg" border=no style="vertical-align:middle"></a></td>

</tr></table>

<table align="center">

<tr><td>

<report:html name="report1" reportFileName="report.raq"

funcBarLocation=""

needPageMark="yes"

generateParamForm="no"

params="<%=param.toString()%>"

exceptionPage="/reportJsp/myError2.jsp"

width="-1"

 

/>

</td>

</tr></table>

 

3. 在模式窗口中显示拖拽控件, 在需要嵌入FlEX拖拽列表的HTML代码中使用<object>和<embed>标签来调用控件，代码如下：

 

<object id='mySwf'

classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/

flash/swflash.cab#version=9,0,0,0' height='400' width='400'>

<param name='src' value='../Communicate-debug/ListtoListMove.swf'/>

<param name='flashVars' value=''/>

<embed name='mySwf' src='../Communicate-debug/ListtoListMove.swf'

pluginspage='http://www.macromedia.com/shockwave/download/

index.cgi?P1_Prod_Version=ShockwaveFlash'

height='100%' width='100%' flashVars=''/>

</object>

注意因为模式窗口最终要返回拖拽列表中目标列表中的选择项，当用户拖拽完成，点击确定时需要将选择结果返回给报表，故需要完成flex控件和外部程序的交互。在flex中可以获得外部HTML代码中的JavaScript函数，这样就可以从flex传递到外部页面供报表调用了。

首先我们在外部包装的html页面上定义javascript函数，其功能是将参数返回给主报表页面，并关闭模式窗口。

<SCRIPT LANGUAGE="JavaScript">

function onOK(a){

var runValue=new Array;

alert(a);

runValue[0]=a;

window.returnValue = runValue;

window.close();

}

</SCRIPT>

接下来我们需要在FLEX控件的MXML代码中定义“确定”按钮，调用ActionScript中的callWrapper()函数以调用外部包装的javascript函数onOK()。

<mx:Script>

import flash.external.*;

public function callWrapper():void {

var s:String;

if (ExternalInterface.available) {

var wrapperFunction:String = "onOK";

s = ExternalInterface.call(wrapperFunction,destlist.dataProvider.toString());

} else {

s = "Wrapper not available";

}

trace(s);

}

</mx:Script>

 

 

三、实现效果：

1.查询表单中单击单元格打开拖拽选择窗口：

 

 

2.拖拽完成后点击OK，返回报表查询页面，并返回拖拽选择的查询参数。