DataGrid的一些要害属性

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

查看更多 下一篇