注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Flex 技术博客

醉里挑灯看剑,梦回吹角连营

 
 
 

日志

 
 

Flex DataGrid如何实现根据多列排序(Multiple Column Sort)的功能  

2008-06-11 17:11:12|  分类: Flex 应用 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

我们知道这Flex 3.0以前的DataGrid默认只能有一列进行排序,不能进行多列排序。其实要想实现多列排序也并不难。我们只要利用Sort和SortField这两个对象就可以达到这个目的。
不过首先该DataGrid的DataProvider必须是实现了ICollectionView接口,比如ArrayCollection和XMLListCollection都可以。
实现的方法大致如下:
系统初始化时给dataProvider指定一个Sort对象,该对象包括3个SortField,排序的优先级就是按照先后顺序来的。
然后给DataGrid的headerRelease事件指定一个排序方法处理,每次都将最新点击的列作为第一排序,将之前的第一和第二排序分别指定成第二和第三排序,在应用新的排序方法后,我们调用了event.preventDefault()方法,防止调用系统默认的排序方法,否则多行排序的功能就无效。

下面的例子遗憾的是多列排序后,默认的表示排序的箭头图标没能出现,这也是preventDefault()带来的副作用。
下面是代码:
由于本人找不到合适的空间放演示程序和文件,今后都将以图片和代码的形式贴在这里。可能会有些不便,但也省心了很多,要看演示效果的朋友可以用FlexBuilder运行一下代码即可。

<?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>

 

 

  评论这张
 
阅读(3498)| 评论(2)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017