`

flex,datagrid多列排序

    博客分类:
  • flex
阅读更多
<?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 checkbox实现

    Flex Datagrid提供了许多高级特性,如排序、过滤、分页等,可以通过自定义列样式、数据提供程序和事件处理来实现。此外,还可以通过使用ItemEditor实现单元格编辑,或者通过使用AdvancedDataGrid组件来处理更复杂的...

    flex DataGrid 表头分组

    首先,表头分组允许我们将数据按照某一列或多列的值进行分组,形成层次化的表头结构。例如,如果我们有一个包含产品信息的数据集,可以按类别对产品进行分组,这样所有同一类别的产品就会被组织在一起,便于用户浏览...

    Flex dataGrid 全选、反选

    DataGrid由多个列组成,每一列可能包含不同类型的控件,如文本、图像或复选框。在需要全选和反选功能时,通常会在表头中添加一个复选框,作为全选/反选的触发器。当用户点击这个复选框时,所有行中的复选框状态应随...

    flex datagrid插入多列Checkbox应用实例

    本实例即展示了如何在Flex DataGrid中实现多列复选框的功能,同时避免了常见的拖动滚动条导致的混乱问题。 首先,我们需要创建一个自定义的CellRenderer,这个CellRenderer将负责在每个单元格中显示复选框。在...

    flex datagrid

    它以表格形式呈现,非常适合用来显示多列数据,并提供了排序、选择、编辑等多种功能。在这个教程中,我们将深入探讨 DataGrid 的基本使用和一些关键特性。 1. 建立 DataGrid - MXML 方式:在 MXML 文件中,你可以...

    flex DataGrid xml 动态数据列表实例

    3. **创建`DataGrid`**:在Flex中,我们先创建一个`DataGrid`实例,并设置其相关属性,如列的宽度和是否可排序等。 4. **绑定数据**:将解析后的XML数据绑定到`DataGrid`。这通常通过`dataProvider`属性完成。`data...

    flex datagrid 表格 合计

    1. **DataGrid组件**:DataGrid是Flex中用于展示结构化数据的组件,它可以显示多列数据,并支持排序、选择和编辑等功能。在创建DataGrid时,我们需要指定数据源(通常是ArrayCollection或XMLListCollection)。 2. ...

    flex datagrid doubleclick 实例

    它可以显示多列数据,并支持排序、分页和选择等交互功能。DataGrid通常与数据提供者结合使用,如ArrayCollection或XMLListCollection,来展示动态数据。 2. **双击事件(doubleclick)**: Flex中的事件处理机制...

    flex下拉dataGrid

    DataGrid控件用于显示和编辑多列数据,支持排序、选择和滚动等功能。我们可以根据需求定制DataGrid的列配置,包括列宽、标题、数据类型等。同时,DataGrid的数据源同样可以绑定到ComboBox的dataProvider,确保两者...

    Flex中如何创建自定义排序DataGrid控件的例子

    在Flex开发中,DataGrid控件是用于展示数据集的常用组件,它可以显示表格形式的数据并支持用户交互,如排序、选择和编辑。然而,有时我们可能需要对DataGrid的默认排序功能进行自定义,以满足特定的业务需求。本教程...

    flex datagrid to excel

    标题“flex datagrid to excel”涉及的技术点主要是Adobe Flex中的数据网格组件(DataGrid)与Excel文件的交互。Flex是一种用于构建富互联网应用程序(RIA)的开源框架,它基于ActionScript和MXML语言。在Flex中,...

    Flex DataGrid组件 使用详解

    DataGrid组件不仅支持基本的表格布局,还提供了排序、编辑、自定义列头、滚动、以及单元格嵌入组件等多种高级特性。 DataGrid组件的核心特点包括: 1. **数据绑定**:DataGrid可以绑定到内部或外部数据源,如...

    flex基于datagrid控件的增删改查及分页实现

    它可以显示多列数据,并允许用户进行排序、选择和编辑。DataGrid通常与ArrayCollection或XMLListCollection等数据提供者结合使用,来展示动态数据。 2. 数据绑定: 在Flex中,数据绑定是连接UI组件和数据模型的过程...

    Flex-DataGrid源码及资料

    3. 插入复选框控件:在DataGrid中插入复选框可以方便用户进行多项选择。通常,我们需要自定义一个数据列类,比如CheckBoxGridColumn,继承自GridColumn,并在renderFunction中创建并返回一个CheckBox对象。同时,...

    Flex DataGrid 内嵌ComboBox 再内嵌一个 DataGrid

    DataGrid是Flex中用于显示结构化数据的控件,它可以显示表格形式的数据,支持排序、分页和自定义列等特性。在Flex应用中,DataGrid常用于显示大量的列表数据,通过灵活的布局和样式设置,可以定制出各种美观且功能...

    Flex创建可编辑以及分页的DataGrid

    在Flex开发中,DataGrid控件是用于展示数据集并进行交互操作的重要组件。它能够以表格形式显示数据,支持排序、筛选、编辑等功能,极大地增强了用户界面的交互性。本篇文章将深入探讨如何在Flex中创建一个既可编辑又...

    flex datagrid 数据保存到excel以及从excel读取数据

    总之,`flex datagrid 数据保存到excel以及从excel读取数据`这个主题涵盖了数据的序列化、转换、文件操作和数据交互等多个方面,是企业级应用中常见的功能需求。通过使用合适的AS3库和正确的方法,我们可以实现高效...

    flex datagrid checkbox 全选/反选

    -- 更多列 --&gt; &lt;/mx:DataGrid&gt; ``` 这里,`headerRenderer`和`itemRenderer`都指向了自定义的`CheckBoxRender`类。这使得我们可以同时在表头和每一行都显示复选框,并且能够通过自定义逻辑控制它们的状态。 ####...

    Flex4之DataGrid四个的示例【客户端和服务器端】

    DataGrid是Flex中用于显示和编辑结构化数据的组件,它可以显示多行和多列的数据,并且支持排序、选择和编辑功能。在Flex4中,DataGrid有了更多的定制选项和性能优化,使得它在处理大量数据时更为高效。 2. **...

Global site tag (gtag.js) - Google Analytics