报表查询

润乾报表查询表单应用Flex拖拽控件

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

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

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

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

1.       初始化列表数据源：

private function

initApp():

void

{

   srclist.dataProvider =

new

ArrayCollection([

' 选项 A'

,

B' C' D' E'

]);

   destlist.dataProvider =

ArrayCollection([]);

}

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

<mx:List id="srclist"

                    allowMultipleSelection="true"

                    dragEnabled="true"

                    dragMoveEnabled="true"

                    dropEnabled="true"/>

<mx:List id="destlist"

                    dropEnabled="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"

           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

callWrapper():

var

s:String;

if

(ExternalInterface.available) {

wrapperFunction:String =

"onOK"

;

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

        }

else

           s =

"Wrapper not available" trace

(s);

     }

</mx:Script>

三、实现效果：

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