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数据库
我们还需要添加一个WebService组件,但是在选项卡中没有,所以切换到代码视图在文件中添加WebService组件
为button添加事件
我是这样猜出来的
为 this.webService1.getEmp.send();设置一个断点,当点击了button后可以通过断点查看出返回结果的格式!然后我们就可以根据这个格式设置DataGrid的dataProvider属性了。如下图所示
![未命名.JPG](/images/cnblogs_com/interboy/%E6%9C%AA%E5%91%BD%E5%90%8D.JPG)
可以看出返回结果集的格式:getEmp.lastResult.diffgram.DocumentElement.Employ;(当然我不是一次就看出来了,我试了好多次才试出来的)。那么DataGrid的dataProvider属性就应该是webService.getEmp.lastResult.diffgram.DocumentElement.Employ,在为DataGrid设置好headerText和dataField就可以了。下面是完整的代码
可能我的方法还不是最好的,但是毕竟比写一个方法来处理返回结果要省事多了,希望能够需要的人有所帮助,少走些弯路
首先用.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组件,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;
}
我们还需要添加一个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的帮助文件我这里就不多说了。<mx:operation name="getEmp">
</mx:operation>
</mx:WebService>
为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上!<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function btn_click():void
{
this.webService1.getEmp.send();
}
]]>
</mx:Script>
我是这样猜出来的
为 this.webService1.getEmp.send();设置一个断点,当点击了button后可以通过断点查看出返回结果的格式!然后我们就可以根据这个格式设置DataGrid的dataProvider属性了。如下图所示
可以看出返回结果集的格式: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>
<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>
可能我的方法还不是最好的,但是毕竟比写一个方法来处理返回结果要省事多了,希望能够需要的人有所帮助,少走些弯路