现在的位置: 首页 > 综合 > 正文

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

2013年09月13日 ⁄ 综合 ⁄ 共 3080字 ⁄ 字号 评论关闭

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>

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

抱歉!评论已关闭.