DataGrid的一些关键属性
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。如果不确定,则可能需要在组件中设置显式宽度或高度以允许稍后显示滚动条。