<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="initDP();"
width="550"
height="400">
<mx:Script>
<![CDATA[
import mx.events.DataGridEvent;
import mx.collections.*;
// Declare storage variables and initialize the simple variables.
// The data provider collection.
private var myDPColl:ArrayCollection;
// The Sort object used to sort the collection.
[Bindable]
private var sortA:Sort;
// The sort fields used to determine the sort.
private var sortByInStock:SortField;
private var sortByArtist:SortField;
private var sortByAlbum:SortField;
private var sortByPrice:SortField;
// The data source that populates the collection.
private var myDP:Array=[{Artist: 'Pavement', Album: 'Slanted and Enchanted', Price: 11.99, InStock: true}, {Artist: 'Pavement', Album: 'Crooked Rain, Crooked Rain', Price: 10.99, InStock: false}, {Artist: 'Pavement', Album: 'Wowee Zowee', Price: 12.99, InStock: true}, {Artist: 'Asphalt', Album: 'Brighten the Corners', Price: 11.99, InStock: false}, {Artist: 'Asphalt', Album: 'Terror Twilight', Price: 11.99, InStock: true}, {Artist: 'Asphalt', Album: 'Buildings Meet the Sky', Price: 14.99, InStock: true}, {Artist: 'Other', Album: 'Other', Price: 5.99, InStock: true}];
//Initialize the DataGrid control with sorted data.
private function initDP():void
{
//Create an ArrayCollection backed by the myDP array of data.
myDPColl=new ArrayCollection(myDP);
//Create a Sort object to sort the ArrrayCollection.
sortA=new Sort();
//Initialize SortField objects for all valid sort fields:
// A true second parameter specifies a case-insensitive sort.
// A true third parameter specifies descending sort order.
// A true fourth parameter specifies a numeric sort.
sortByInStock=new SortField("InStock", true, true);
sortByArtist=new SortField("Artist", true);
sortByAlbum=new SortField("Album", true);
sortByPrice=new SortField("Price", true, false, true);
// Sort the grid using the InStock, Artist, and Album fields.
sortA.fields=[sortByInStock, sortByArtist, sortByAlbum];
myDPColl.sort=sortA;
// Refresh the collection view to show the sort.
myDPColl.refresh();
// Initial display of sort fields
tSort0.text="First Sort Field: InStock";
tSort1.text="Second Sort Field: Artist";
tSort2.text="Third Sort Field: Album";
// Set the ArrayCollection as the DataGrid data provider.
myGrid.dataProvider=myDPColl;
// Set the DataGrid row count to the array length,
// plus one for the header.
myGrid.rowCount=myDPColl.length + 1;
}
// Re-sort the DataGrid control when the user clicks a header.
private function headRelEvt(event:DataGridEvent):void
{
// The new third priority was the old second priority.
sortA.fields[2]=sortA.fields[1];
tSort2.text="Third Sort Field: " + sortA.fields[2].name;
// The new second priority was the old first priority.
sortA.fields[1]=sortA.fields[0];
tSort1.text="Second Sort Field: " + sortA.fields[1].name;
// The clicked column determines the new first priority.
if (event.columnIndex == 0)
{
sortByArtist.descending=!sortByArtist.descending;
sortA.fields[0]=sortByArtist;
}
else if (event.columnIndex == 1)
{
sortByAlbum.descending=!sortByAlbum.descending;
sortA.fields[0]=sortByAlbum;
}
else if (event.columnIndex == 2)
{
sortByPrice.descending=!sortByPrice.descending;
sortA.fields[0]=sortByPrice;
}
else
{
sortA.fields[0]=sortByInStock;
}
tSort0.text="First Sort Field: " + sortA.fields[0].name;
// Apply the updated sort fields and re-sort.
myDPColl.sort=sortA;
// Refresh the collection to show the sort in the grid.
myDPColl.refresh();
// Prevent the DataGrid from doing a default column sort.
event.preventDefault();
}
]]>
</mx:Script>
<!-- The Data Grid control.
By default the grid and its columns can be sorted by clicking.
The headerRelease event handler overrides the default sort
behavior. -->
<mx:DataGrid id="myGrid"
width="100%"
headerRelease="headRelEvt(event);">
<mx:columns>
<mx:DataGridColumn minWidth="120"
dataField="Artist"/>
<mx:DataGridColumn minWidth="200"
dataField="Album"/>
<mx:DataGridColumn width="75"
dataField="Price"/>
<mx:DataGridColumn width="75"
dataField="InStock"
headerText="In Stock"/>
</mx:columns>
</mx:DataGrid>
<mx:VBox>
<mx:Label id="tSort0"
text="First Sort Field: "/>
<mx:Label id="tSort1"
text="Second Sort Field: "/>
<mx:Label id="tSort2"
text="Third Sort Field: "/>
</mx:VBox>
</mx:Application>
分享到:
相关推荐
Flex Datagrid提供了许多高级特性,如排序、过滤、分页等,可以通过自定义列样式、数据提供程序和事件处理来实现。此外,还可以通过使用ItemEditor实现单元格编辑,或者通过使用AdvancedDataGrid组件来处理更复杂的...
首先,表头分组允许我们将数据按照某一列或多列的值进行分组,形成层次化的表头结构。例如,如果我们有一个包含产品信息的数据集,可以按类别对产品进行分组,这样所有同一类别的产品就会被组织在一起,便于用户浏览...
DataGrid由多个列组成,每一列可能包含不同类型的控件,如文本、图像或复选框。在需要全选和反选功能时,通常会在表头中添加一个复选框,作为全选/反选的触发器。当用户点击这个复选框时,所有行中的复选框状态应随...
本实例即展示了如何在Flex DataGrid中实现多列复选框的功能,同时避免了常见的拖动滚动条导致的混乱问题。 首先,我们需要创建一个自定义的CellRenderer,这个CellRenderer将负责在每个单元格中显示复选框。在...
它以表格形式呈现,非常适合用来显示多列数据,并提供了排序、选择、编辑等多种功能。在这个教程中,我们将深入探讨 DataGrid 的基本使用和一些关键特性。 1. 建立 DataGrid - MXML 方式:在 MXML 文件中,你可以...
3. **创建`DataGrid`**:在Flex中,我们先创建一个`DataGrid`实例,并设置其相关属性,如列的宽度和是否可排序等。 4. **绑定数据**:将解析后的XML数据绑定到`DataGrid`。这通常通过`dataProvider`属性完成。`data...
1. **DataGrid组件**:DataGrid是Flex中用于展示结构化数据的组件,它可以显示多列数据,并支持排序、选择和编辑等功能。在创建DataGrid时,我们需要指定数据源(通常是ArrayCollection或XMLListCollection)。 2. ...
它可以显示多列数据,并支持排序、分页和选择等交互功能。DataGrid通常与数据提供者结合使用,如ArrayCollection或XMLListCollection,来展示动态数据。 2. **双击事件(doubleclick)**: Flex中的事件处理机制...
DataGrid控件用于显示和编辑多列数据,支持排序、选择和滚动等功能。我们可以根据需求定制DataGrid的列配置,包括列宽、标题、数据类型等。同时,DataGrid的数据源同样可以绑定到ComboBox的dataProvider,确保两者...
在Flex开发中,DataGrid控件是用于展示数据集的常用组件,它可以显示表格形式的数据并支持用户交互,如排序、选择和编辑。然而,有时我们可能需要对DataGrid的默认排序功能进行自定义,以满足特定的业务需求。本教程...
标题“flex datagrid to excel”涉及的技术点主要是Adobe Flex中的数据网格组件(DataGrid)与Excel文件的交互。Flex是一种用于构建富互联网应用程序(RIA)的开源框架,它基于ActionScript和MXML语言。在Flex中,...
DataGrid组件不仅支持基本的表格布局,还提供了排序、编辑、自定义列头、滚动、以及单元格嵌入组件等多种高级特性。 DataGrid组件的核心特点包括: 1. **数据绑定**:DataGrid可以绑定到内部或外部数据源,如...
它可以显示多列数据,并允许用户进行排序、选择和编辑。DataGrid通常与ArrayCollection或XMLListCollection等数据提供者结合使用,来展示动态数据。 2. 数据绑定: 在Flex中,数据绑定是连接UI组件和数据模型的过程...
3. 插入复选框控件:在DataGrid中插入复选框可以方便用户进行多项选择。通常,我们需要自定义一个数据列类,比如CheckBoxGridColumn,继承自GridColumn,并在renderFunction中创建并返回一个CheckBox对象。同时,...
DataGrid是Flex中用于显示结构化数据的控件,它可以显示表格形式的数据,支持排序、分页和自定义列等特性。在Flex应用中,DataGrid常用于显示大量的列表数据,通过灵活的布局和样式设置,可以定制出各种美观且功能...
在Flex开发中,DataGrid控件是用于展示数据集并进行交互操作的重要组件。它能够以表格形式显示数据,支持排序、筛选、编辑等功能,极大地增强了用户界面的交互性。本篇文章将深入探讨如何在Flex中创建一个既可编辑又...
总之,`flex datagrid 数据保存到excel以及从excel读取数据`这个主题涵盖了数据的序列化、转换、文件操作和数据交互等多个方面,是企业级应用中常见的功能需求。通过使用合适的AS3库和正确的方法,我们可以实现高效...
-- 更多列 --> </mx:DataGrid> ``` 这里,`headerRenderer`和`itemRenderer`都指向了自定义的`CheckBoxRender`类。这使得我们可以同时在表头和每一行都显示复选框,并且能够通过自定义逻辑控制它们的状态。 ####...
DataGrid是Flex中用于显示和编辑结构化数据的组件,它可以显示多行和多列的数据,并且支持排序、选择和编辑功能。在Flex4中,DataGrid有了更多的定制选项和性能优化,使得它在处理大量数据时更为高效。 2. **...