DataGrid控件是一个可以展示多列数据的列表控件。展示数据的表格。在flex中DataGrid的展示效果很炫。
列头可以随意的拖动和排序。
关于DataGrid控件
DataGrid控件可以提供以下功能:
1、可调尺寸、排序、自定义列(包括隐藏列)
2、设置自定义列和标题行(包括设置标题行文本换行)
3、在运行时用户可以resize and reorder
4、触发选中事件
5、可以在任一列使用自定义项目输出(custom item renderer)
6、支持分页
7、锁定行和列,不显示滚动条
创建一个DataGrid控件
1.固定数据
列头的标签:
<mx:columus>
<mx:DataGridColumn headerText="编号" dataField="绑定的列名“/>
</mx:columus>
表数据:
<mx:ArrayCollection>
<mx:Object>
<mx:bid>01</mx:bid>
<mx:bname>lee</mx:bname>
<mx:bsex>男</mx:bsex>
</mx:Object>
</mx:ArrayCollection>
完整代码:
<mx:DataGrid x="10" y="10">
<mx:columns>
<mx:DataGridColumn headerText="编号" dataField="bid"/>
<mx:DataGridColumn headerText="名称" dataField="bname"/>
<mx:DataGridColumn headerText="性别" dataField="bsex"/>
</mx:columns>
<mx:ArrayCollection>
<mx:Object>
<mx:bid>01</mx:bid>
<mx:bname>lee</mx:bname>
<mx:bsex>男</mx:bsex>
</mx:Object>
<mx:Object>
<mx:bid>02</mx:bid>
<mx:bname>rose</mx:bname>
<mx:bsex>女</mx:bsex>
</mx:Object>
</mx:ArrayCollection>
</mx:DataGrid>
2.固定数据2
使用mx:DataGridColumn明确有哪些列:
<mx:DataGrid>
<mx:ArrayCollection>
<mx:Object bid="01" bname="lee" bsex="男" />
<mx:Object bid="02" bname="rose" bsex="女" />
</mx:ArrayCollection>
<mx:columns>
<mx:DataGridColumn dataField="bid" />
<mx:DataGridColumn dataField="bname" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
隐藏和显示列某一列数据
新建一个按钮作为显示和隐藏的开关
完整代码:
<mx:DataGrid x="10" y="10">
<mx:columns>
<mx:DataGridColumn headerText="编号" dataField="bid"/>
<mx:DataGridColumn headerText="名称" dataField="bname"/>
<mx:DataGridColumn id="sex" visible="false" headerText="性别" dataField="bsex"/>
</mx:columns>
<mx:ArrayCollection>
<mx:Object>
<mx:bid>01</mx:bid>
<mx:bname>lee</mx:bname>
<mx:bsex>男</mx:bsex>
</mx:Object>
<mx:Object>
<mx:bid>02</mx:bid>
<mx:bname>rose</mx:bname>
<mx:bsex>女</mx:bsex>
</mx:Object>
</mx:ArrayCollection>
</mx:DataGrid>
<mx:Button label="显示或隐藏" click="sex.visible = !sex.visible;"/>
3.动态数据
通过ActionScript绑定数据
DataGrid的dataProvider属性用来绑定数据。
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initData()">
<mx:Script>
<![CDATA[
import mx.collections.*;
private var DGArray:Array = [
{bid:'01', bname:'lee', bsex:'男'},
{bid:'02', bname:'rose', bsex:'女'}];
[Bindable]
public var initDG:ArrayCollection;
//从数组Array初始化initDG ArrayCollection.
//你可以转化HTTPService, WebService, or RemoteObject的结果为ArrayCollection.
public function initData():void {
initDG=new ArrayCollection(DGArray);
}
]]>
</mx:Script>
<mx:DataGrid y="10" x="182" id="myGrid" dataProvider="{initDG}" >
<mx:columns>
<mx:DataGridColumn headerText="编号" dataField="bid"/>
<mx:DataGridColumn headerText="名称" dataField="bname"/>
<mx:DataGridColumn headerText="性别" dataField="bsex"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
等待要要补充。呵呵