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>[e-mail]</email>

            <active>true</active>

            <image>images/arrow_icon_sm.png</image>

        </employee>

        <employee>

            <name>Joanne Wall</name>

            <phone>555-219-2012</phone>

            <email>[e-mail]</email>

            <active>true</active>

        </employee>

        <employee>

            <name>Maurice Smith</name>

            <phone>555-219-2012</phone>

            <email>[e-mail]</email>

            <active>false</active>

        </employee>

        <employee>

            <name>Mary Jones</name>

            <phone>555-219-2000</phone>

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