Spark DataGrid and Grid controls

Spark DataGrid由按行按列排列的独立的格子组成。DataGrid控件可支持大量格子平滑滚动。Spark DataGrid控件实现了skinnable接口。

Spark DataGrid控件提供下面特性：

1.响应列宽变化

2.控制列的可见性

2.格子和行的选择

3.单选和多选模式 

4.自定义列头

5.可编辑的格子

6.列排序

7.自定义项渲染器和项编辑器

8.自定义控件的皮肤 

 使用<s:DataGrid>标签定义Spark DataGrid控件。DataGrid控件使用一个list数据提供器来支持数据显示。data provider由一个对象列表组成。其中的对象被称为Item。每一个Item对应一个行。每一个列对应一个属性。

例  基本Grid

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDGSimple.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:DataGrid>
        <s:dataProvider>
        <s:ArrayList>
            <fx:Object>
            <fx:Artist>Pavement</fx:Artist>
            <fx:Price>11.99</fx:Price>
            <fx:Album>Slanted and Enchanted</fx:Album>
            </fx:Object>
            <fx:Object>
            <fx:Price>11.99</fx:Price>
            <fx:Artist>Pavement</fx:Artist>
            <fx:Album>Brighten the Corners</fx:Album>
            </fx:Object>
        </s:ArrayList>
        </s:dataProvider>
    </s:DataGrid>

</s:Application>

 运行

DataGrid控件通过dataProvider属性指定数据。dataProvider属性的类型是IList。可以使用ArrayList、ArrayCollection或者是任何实现了IList接口的类，做为data provider。ArrayList是一个轻量级的IList接口现实火龙。如果你不想支持排序的话，可以使用它。为了支持行排序，可使用实现ICollectionView接口的类，如ListCollectionView.

下面这个例子，演示了如下功能：通过一个变量填充Grid

 <?xml version="1.0" encoding="utf-8"?>

<!-- dpcontrols\sparkdpcontrols\SparkDGPassedData.mxml -->

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

initialize="initData();">

    <fx:Script>

    <![CDATA[

    import mx.collections.*;

    private var dgArray:Array = [

    {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},

    {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}];

    [Bindable]

    public var initDG:ArrayCollection;

    // Initialize initDG variable from the Array.

    public function initData():void 

    {

        initDG = new ArrayCollection(dgArray);

    }

    ]]>

    </fx:Script>

<s:DataGrid id="myGrid"

width="350" height="200"

dataProvider="{initDG}"/>

</s:Application>

运行

例 从XML中读取数据填到表格中。下面的表单显示选择表格项。

 <?xml version="1.0" encoding="utf-8"?>

<!-- dpcontrols\sparkdpcontrols\SparkDGXMLData.mxml -->

<s:Application

xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

width="500">

<s:layout>

<s:VerticalLayout/>

</s:layout>

    <fx:Declarations>

        <fx:XMLList id="employees">

            <employee>

            <name>Joanne Wall</name>

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

            <email>jwall@fictitious.com</email>

            <active>true</active>

            </employee>

            

            <employee>

            <name>Mary Jones</name>

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

            <email>mjones@fictitious.com</email>

            <active>true</active>

            USING FLEX 548

            Building the user interface

            Last updated 5/9/2012

            </employee>

            

            <employee>

            <name>Maurice Smith</name>

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

            <email>maurice@fictitious.com</email>

            <active>false</active>

            </employee>

            

            <employee>

            <name>Dave Davis</name>

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

            <email>ddavis@fictitious.com</email>

            <active>true</active>

            </employee>

            

            <employee>

            <name>Tom Maple</name>

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

            <email>tmaple@fictitious.com</email>

            <active>true</active>

            </employee>

        </fx:XMLList>

    <s:XMLListCollection id="employees2" source="{employees}"/>

    </fx:Declarations>

    <s:DataGrid id="dg" width="500" dataProvider="{employees2}">

        <s:columns>

            <s:ArrayList>

            <s:GridColumn dataField="name" headerText="Name"/>

            <s:GridColumn dataField="phone" headerText="Phone"/>

            <s:GridColumn dataField="email" headerText="Email"/>

            </s:ArrayList>

        </s:columns>

    </s:DataGrid>

    <s:Form>

        <s:FormItem label="Name">

        <s:Label text="{dg.selectedItem.name}"/>

        </s:FormItem>

        <s:FormItem label="Email">

        <s:Label text="{dg.selectedItem.email}"/>

        </s:FormItem>

        <s:FormItem label="Phone">

        <s:Label text="{dg.selectedItem.phone}"/>

        </s:FormItem>

    </s:Form>

</s:Application>

运行

例 使用s:columns标签。指定显示的列。并改弯列的默认宽度及标题

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDGSpecifyColumns.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:DataGrid>
        <s:dataProvider>
            <s:ArrayCollection>
                <fx:Object Artist="Pavement" Price="11.99"
                Album="Slanted and Enchanted"/>
                <fx:Object Artist="Pavement"
                Album="Brighten the Corners" Price="11.99"/>
            </s:ArrayCollection>
        </s:dataProvider>
        <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="Album" width="300"/>
            <s:GridColumn dataField="Price" headerText="List Price"/>
        </s:ArrayList>
        </s:columns>
    </s:DataGrid>

</s:Application>

运行

 例 点击按扭显示或隐藏Price列

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDGVisibleColumn.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:DataGrid id="myDG" width="350">
    <s:ArrayCollection>
        <fx:Object Artist="Pavement" Price="11.99"
        Album="Slanted and Enchanted"/>
        <fx:Object Artist="Pavement"
        Album="Brighten the Corners" Price="11.99"/>
    </s:ArrayCollection>
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="Artist"/>
            <s:GridColumn dataField="Album"/>
            <s:GridColumn id="price" dataField="Price" visible="false"/>
        </s:ArrayList>
    </s:columns>
</s:DataGrid>
<!-- The column id property specifies the column to show.-->
<s:Button label="Toggle Price Column"
click="price.visible = !price.visible;" />

</s:Application>

运行 

例 捕获处理GridClickEvent

<?xml version="1.0" encoding="utf-8"?>

<!-- dpcontrols\sparkdpcontrols\SparkDGEvents.mxml -->

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="450" minHeight="450">

<s:layout>

    <s:VerticalLayout/>

</s:layout>

<fx:Script>

<![CDATA[

    import spark.events.GridEvent;

    private function gridClickEvent(event:GridEvent):void 

    {

    // Access the colunm index, row index, and event type

    // by using the GridEvent object.

    clickColumn.text = String(event.columnIndex);

    clickRow.text = String(event.rowIndex);

    eventType.text = event.type;

    // Access the selection mode of the Grid control.

    selectionType.text = String(event.grid.selectionMode);

    }

]]>

</fx:Script>

<s:DataGrid id="myGrid" width="350" height="150"

            selectionMode="multipleCells"

            gridClick="gridClickEvent(event);">

        <s:ArrayCollection>

            <fx:Object Artist="Pavement" Price="11.99"

            Album="Slanted and Enchanted" />

            <fx:Object Artist="Pavement" Album="Brighten the Corners"

            Price="11.99" />

        </s:ArrayCollection>

</s:DataGrid>

<s:Form>

    <s:FormItem label="Column Index:">

    <s:Label id="clickColumn"/>

    </s:FormItem>

    <s:FormItem label="Row Index:">

    <s:Label id="clickRow"/>

    </s:FormItem>

    <s:FormItem label="Selection type:">

    <s:Label id="selectionType"/>

    </s:FormItem>

    <s:FormItem label="Type:">

    <s:Label id="eventType"/>

    </s:FormItem>

</s:Form>

</s:Application>

运行

例 选择某行 打印出此行最后一个cell的内容

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDGSelection.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
height="450" width="450">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import spark.components.Grid;
import spark.events.GridSelectionEvent;
protected function selectionChangeHandler(event:GridSelectionEvent):void 
{
    const eventGrid:Grid = event.currentTarget.grid;
    var currentIndx:int = eventGrid.selectedIndex;
    var currentDataItem:Object = eventGrid.selectedItem;
    selIndex.text = String(currentIndx);
    selLName.text = String(currentDataItem.lastName);
}
]]>
</fx:Script>
<s:DataGrid id="myDG" width="100%"
    selectionChange="selectionChangeHandler(event)">
    <s:ArrayCollection>
        <fx:Object firstName="Bill" lastName="Smith" companyID="11233"/>
        <fx:Object firstName="Dave" lastName="Jones" companyID="13455"/>
        <fx:Object firstName="Mary" lastName="Davis" companyID="11543"/>
        <fx:Object firstName="Debbie" lastName="Cooper" companyID="14266"/>
    </s:ArrayCollection>
</s:DataGrid>
<s:Label text="Selected index:"/>
<s:TextArea id="selIndex" height="50"/>
<s:Label text="Selected Last Name:"/>
<s:TextArea id="selLName" height="50"/>

</s:Application>

运行 

例 ctrl+c复制单元格到剪切板

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDGMultiSelect.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import flash.events.KeyboardEvent;
import flash.system.System;
import spark.components.gridClasses.CellPosition;
import flash.ui.Keyboard;
// Event handler to recognize when Ctrl-C is pressed,
// and copy the selected cells to the system clipboard.
private function myKeyUpHandler(event:KeyboardEvent):void
{
    if (event.ctrlKey && event.keyCode == Keyboard.C)
    {
        // Separator used between Strings sent to clipboard
        // to separate selected cells.
        const separator:String = ",";
        // The String sent to the clipboard
        var dataString:String = "";
        // Loop over the selectedCells property.
        // Data in selectedCells is ordered so that
        // the last selected cell is at the head of the list.
        const selectedCells:Vector.<CellPosition> = event.currentTarget.selectedCells;
        const n:int = selectedCells.length;
        for (var i:int = 0; i < n; i++)
        {
            // Get the cell position.
            var cell:CellPosition = selectedCells[i];
            // Get the row for the selected cell.
            var data:Object =
            event.currentTarget.grid.dataProvider[cell.rowIndex];
            // Get the name of the field for the selected cell.
            var dataField:String =
            event.currentTarget.grid.columns[cell.columnIndex].dataField;
            // Get the cell data using the field name.
            dataString = data[dataField] + separator + dataString;
        }
        // Remove trailing separator.
        dataString =
        dataString.substr(0, dataString.length - separator.length);
        // Write dataString to the clipboard.
        System.setClipboard(dataString);
}
}
]]>
</fx:Script>

<s:DataGrid  selectionMode="multipleCells"
            keyUp="myKeyUpHandler(event);">
    <s:ArrayCollection>
        <fx:Object>
        <fx:Artist>Pavement</fx:Artist>
        <fx:Price>11.99</fx:Price>
        <fx:Album>Slanted and Enchanted</fx:Album>
        </fx:Object>
        <fx:Object>
        <fx:Artist>Pavement</fx:Artist>
        <fx:Album>Brighten the Corners</fx:Album>
        <fx:Price>11.99</fx:Price>
        </fx:Object>
    </s:ArrayCollection>
    <s:columns>
        <s:ArrayCollection>
        <s:GridColumn dataField="Artist"/>
        <s:GridColumn dataField="Album"/>
        <s:GridColumn dataField="Price"/>
        </s:ArrayCollection>
    </s:columns>
</s:DataGrid>
<s:TextArea id="myTA" text="Paste selected cells here ..."/>

</s:Application>

 运行