DataGrid控件,是我们非常常用的一种控件。它能够将大量的数量很简洁,明了的展示在我们的界面。它是将我们的源数据以表格(行,列)的形式展现。下面,我从数据绑定,列绑定,更新数据这2个方面说说这个控件。
1.数据绑定:
DataGrid控件的数据源是IList类型的,我们经常使用的是XMLListCollection和ArrayCollection。现在以XMLListCollection为列子,下面是一个XMLListCollection(名称为:egXMLListCollection):
private var egXML:XML=<MENU> <TEST> <TESTCOLUMN1>testdata1</TESTCOLUMN1> <TESTCOLUMN2>testdata2</TESTCOLUMN2> <TESTCOLUMN3>testdata3</TESTCOLUMN3> <TESTCOLUMN4>testdata4</TESTCOLUMN4> </TEST> <TEST> <TESTCOLUMN1>testdata1</TESTCOLUMN1> <TESTCOLUMN2>testdata2</TESTCOLUMN2> <TESTCOLUMN3>testdata3</TESTCOLUMN3> <TESTCOLUMN4>testdata4</TESTCOLUMN4> </TEST> <TEST> <TESTCOLUMN1>testdata1</TESTCOLUMN1> <TESTCOLUMN2>testdata2</TESTCOLUMN2> <TESTCOLUMN3>testdata3</TESTCOLUMN3> <TESTCOLUMN4>testdata4</TESTCOLUMN4> </TEST> <TEST> <TESTCOLUMN1>testdata1</TESTCOLUMN1> <TESTCOLUMN2>testdata2</TESTCOLUMN2> <TESTCOLUMN3>testdata3</TESTCOLUMN3> <TESTCOLUMN4>testdata4</TESTCOLUMN4> </TEST> </MENU>; [Bindable] private var egXMLListCollection:XMLListCollection; protected function application1_creationCompleteHandler(event:FlexEvent):void { egXMLListCollection=new XMLListCollection(egXML.TEST); }
然后将该XMLListCollection绑定到我们DataGrid的dataProvider属性。
2.列的绑定:
数据源有了,下一步我们就要为这个DataGrid的每个列写一个标题和填充数据,这样显示出来才能让人更加明白,数据展示的也能更加的清楚。如下:
<s:DataGrid id="TestDataGrid" width="100%" height="100%" dataProvider="{egXMLListCollection}"> <s:columns> <s:ArrayList> <s:GridColumn dataField="TESTCOLUMN1" headerText="列1"> </s:GridColumn> <s:GridColumn dataField="TESTCOLUMN2" headerText="列2"> </s:GridColumn> <s:GridColumn dataField="TESTCOLUMN3" headerText="列3"> </s:GridColumn> <s:GridColumn dataField="TESTCOLUMN4" headerText="列4"> </s:GridColumn> </s:ArrayList> </s:columns> </s:DataGrid>
数据绑定就完成了,非常简单(相对于C#和其他开发平台的DataGrid使用来说)。
效果如下图:
3.数据更新:
当我们绑定好数据后,很多时候我们需要动态的更新数据。这个时候Flex强大的数据绑定技术就体现出优势了,我们不需要对现在这个DataGrid做出任何操作,只需要更改他的数据源-egXMLListCollection,即可对DataTable进行中的数据进行更新。例如:我们将egXMLListCollection的第1个节点中的TESTCOLUMN1的数据改为"我是更新后的数据":
protected function button1_clickHandler(event:MouseEvent):void { egXMLListCollection[0].TESTCOLUMN1="我是更新后的数据"; }
效果如下:
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:FlexDataGrid FlexDataGrid数据绑定
文章固定链接:https://www.pengyaou.com/homeart/ODU=.html