在Flex中如何将WebService中返回的DataTable绑定到DataGrid中

Flex中的DataGrid和.Net的DataGrid很类似,在Flex的DataGrid中有个dataProvider属性,相当于.Net的DataGrid的DataSource属性。而Flex DataGrid 中Column 的 headerText和dataField属性也和.Net一样,为了能够把WebService中返回的DataTable绑定到DataGrid上,我费了不少劲,我在网上找了好久也没有找到。绝大多数都是用的HTTPService返回结果或者是将WebService返回的XML进行处理然后再进行绑定,这种方法虽然够实现但是总觉得不是很爽!我必须写一个函数来处理返回结果!到底能不能不用写函数就直接绑定呢? 当然是可以了,怎么实现,请看下面的例子!
      首先用.Net创建一个简单的WebService,连接的数据库是SqlServer2000的pubs数据库

    [WebMethod (Description  =   " 从数据库中获取人员信息 " )]
    
public  DataTable getEmp()
    {
        
string  sql  =   " SELECT fname, lname, hire_date FROM dbo.employee " ;
        
this .sqlcomm.CommandText  =  sql;
        DataTable table 
=   new  DataTable( " Employ " );
        
this .sqda.Fill(table);
        
return  table;
    }

    创建一个Flex项目DataGridTest,创建项目的同时会创建一个DataGridTest.mxml文件从组件选项卡中拖一个DataGrid和一个Button组件,
我们还需要添加一个WebService组件,但是在选项卡中没有,所以切换到代码视图在文件中添加WebService组件

     < mx:WebService  id ="webService1"  useProxy ="false"  wsdl ="http://localhost/FlexWebService/Service.asmx?WSDL"  showBusyCursor ="true"  fault ="Alert.show('通讯失败,请检查服务器是否存在','提示')" >
        
< mx:operation  name ="getEmp" >
        
</ mx:operation >
    
</ mx:WebService >

至于WebService组件的各个属性请参看FlexBuilder的帮助文件我这里就不多说了。
为button添加事件

     < mx:Button  x ="303"  y ="446"  label ="按钮"  fontWeight ="bold"  fontFamily ="Arial"  width ="92"  height ="41"  click ="this.btn_click()" />
    
< mx:Script >
        
<! [CDATA[
        import mx.controls.Alert;
            private function btn_click():void
            {
                this.webService1.getEmp.send();
            }
        ]]
>
    
</ mx:Script >

接下来是最重要的了!怎么把WebService的返回结果绑定到DataGrid上!
我是这样猜出来的
为 this.webService1.getEmp.send();设置一个断点,当点击了button后可以通过断点查看出返回结果的格式!然后我们就可以根据这个格式设置DataGrid的dataProvider属性了。如下图所示
未命名.JPG
可以看出返回结果集的格式:getEmp.lastResult.diffgram.DocumentElement.Employ;(当然我不是一次就看出来了,我试了好多次才试出来的)。那么DataGrid的dataProvider属性就应该是webService.getEmp.lastResult.diffgram.DocumentElement.Employ,在为DataGrid设置好headerText和dataField就可以了。下面是完整的代码

<? xml version="1.0" encoding="utf-8" ?>
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute" >
    
< mx:Button  x ="303"  y ="446"  label ="按钮"  fontWeight ="bold"  fontFamily ="Arial"  width ="92"  height ="41"  click ="this.btn_click()" />
    
< mx:Script >
        
<! [CDATA[
        import mx.controls.Alert;
            private function btn_click():void
            {
                this.webService1.getEmp.send();
            }
        ]]
>
    
</ mx:Script >
    
< mx:WebService  id ="webService1"  useProxy ="false"  wsdl ="http://localhost/FlexWebService/Service.asmx?WSDL"  showBusyCursor ="true"  fault ="Alert.show('通讯失败,请检查服务器是否存在','提示')" >
        
< mx:operation  name ="getEmp" >
        
</ mx:operation >
    
</ mx:WebService >
    
< mx:DataGrid  id ="dg1"  x ="42"  y ="31"  width ="643"  height ="385"  dataProvider ="{this.webService1.getEmp.lastResult.diffgram.DocumentElement.Employ}" >
        
< mx:columns >
            
< mx:DataGridColumn  headerText ="First Name"  dataField ="fname" />
            
< mx:DataGridColumn  headerText ="Last Name"  dataField ="lname" />
            
< mx:DataGridColumn  headerText ="Hire Date"  dataField ="hire_date" />
        
</ mx:columns >
    
</ mx:DataGrid >
</ mx:Application >


可能我的方法还不是最好的,但是毕竟比写一个方法来处理返回结果要省事多了,希望能够需要的人有所帮助,少走些弯路

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值