DataGrid控件提供以下功能:
-
列可以具有不同宽度或同一固定宽度
-
用户可以在运行时调整其尺寸的列
-
用户可以在运行时对其重新排序的列
-
可选择自定义列标题
-
对任意列使用自定义项目渲染器以显示除文本之外的数据的功能
-
支持通过单击列对数据进行排序
默认大小:如果列为空,则默认宽度为 300 个像素。如果列包含信息但没有定义显式宽度,则每列的默认宽度为 100 个像素。如果可能,调整 DataGrid 宽度的大小以适应所有列的宽度。默认的显示行数为 7 行,其中包括标题;默认情况下,每行的高度为 20 个像素。
1.数据显示
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
horizontalAlign="center"
backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
<mx:XMLList
id="employees">
<employee>
<name>Christina
Coenraets</name>
<phone>555-219-2270</phone>
<email>ccoenraets@fictitious.com</email>
<active>true</active>
<image>images/arrow_icon_sm.png</image>
</employee>
<employee>
<name>Joanne
Wall</name>
<phone>555-219-2012</phone>
<email>jwall@fictitious.com</email>
<active>true</active>
</employee>
<employee>
<name>Maurice
Smith</name>
<phone>555-219-2012</phone>
<email>maurice@fictitious.com</email>
<active>false</active>
</employee>
<employee>
<name>Mary
Jones</name>
<phone>555-219-2000</phone>
<email>mjones@fictitious.com</email>
<active>true</active>
</employee>
</mx:XMLList>
<mx:Panel
title="DataGrid Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="500"
paddingTop="5"
paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
<mx:Label
width="100%" color="0x323232"
text="Select
a row in the DataGrid control."/>
<mx:DataGrid
id="dg" color="0x323232" width="100%" rowCount="3" dataProvider="{employees}">
<mx:columns>
<mx:DataGridColumn
dataField="name" headerText="Name"/>
<mx:DataGridColumn
dataField="phone" headerText="Phone"/>
<mx:DataGridColumn
dataField="email" headerText="Email"/>
</mx:columns>
</mx:DataGrid>
<mx:Form
color="0x323232" width="100%" height="100%" paddingTop="0" paddingBottom="0" >
<mx:FormItem
label="Name" paddingTop="0" paddingBottom="0">
<mx:Label
text="{dg.selectedItem.name}"/>
</mx:FormItem>
<mx:FormItem
label="Email" paddingTop="0" paddingBottom="0">
<mx:Label
text="{dg.selectedItem.email}"/>
</mx:FormItem>
<mx:FormItem
label="Phone" paddingTop="0" paddingBottom="0">
<mx:Label
text="{dg.selectedItem.phone}"/>
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:Application>
注意:如果需要通过点击某行触发事件,则使用ListEvent.ITEM_CLICK,通过他的columnIndex和rowIndex属性可以的到鼠标选中的列号和行号。可以通过DataGrid(evt.currentTarget).selectedItem.name得到具体的字段名,即选择了具体的某行某列的某字段名。还有如editable属性为true时,则列表为看编辑状态。常用渲染器来渲染表格数据,如改变显示格式、字体颜色或在单元格中显示不同的组件,这里有些功能也可以通过labelFunction实现。
2. 通过headerColors样式,设置DataGrid头部颜色
headerColors="[red, blue]" 用于绘制标题背景渐变的两种颜色的数组。第一种颜色是顶层颜色。第二种颜色是底层颜色。 默认值为 [0xFFFFFF,
0xE6E6E6]。
3.通过columns属性,动态的增加DataGrid的一个列
4.通过rollOverColor(用户将鼠标滑过行时的行背景颜色。 默认值为 0xE3FFD6
.)和selectionColor(用户选择行中的项目渲染器时的行背景颜色)样式,设置DataGrid中选中栏覆盖颜色。
5.有时候需要显示树的效果,则应该使用AdvancedDataGrid,AdvancedDataGrid 控件的AdvancedDataGridColumn提供多列排序支持给ArrayCollection 的filterFunction 属性赋值自定义函数引用以执行过滤匹配。(=true则显示)。设置AdvancedDataGrid 的selectionMode 属性为multipleCells 和selectedCells 属性为object数组,该数组包含被选择单元格的rowIndex 和columnIndex。
6.通过 horizontalScrollPolicy、verticalScrollPolicy,设置水平、垂直滚动条,请注意,此策略可能会影响组件的度量大小。如果此策略是 ScrollPolicy.AUTO
,则滚动栏将不计入度量大小。这样,可防止显示滚动栏时布局被重新计算。如果您确定用于滚动条的数据足够,则应将此策略设置为 ScrollPolicy.ON
。如果不确定,则可能需要在组件中设置显式宽度或高度以允许稍后显示滚动条。