润乾报表默认提供了很多种填报编辑风格，如下拉树，下拉列表框，复选框等等，同时润乾报表也开放了编辑风格的扩展接口，用户可以根据具体需求定制开发多样化的编辑风格。具有拖拽功能的编辑界面，允许用户使用鼠标选择某个对象并在屏幕上进行移动，这样用户可在列表之间拖放选择数据，能够使界面操作友好性得到提升。本文介绍如何利用自定义编辑风格实现在查询表单中应用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=\'#\'" /images/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，返回报表查询页面，并返回拖拽选择的查询参数。
分享 | 评论 (
评论
想第一时间抢沙发么？