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

By Minidxer | April 10, 2008

接下来的例子演示了如何利用SortField类以及自定义的比较函数，来创建可以自定义排序的DataGrid控件。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：

下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.collections.SortField;
  10.             import mx.collections.Sort;
  11.             import mx.controls.dataGridClasses.DataGridColumn;
  12.             import mx.utils.ObjectUtil;
  13.  
  14.             private function sortOld():void {
  15.                 var sortField:SortField = new SortField();
  16.                 sortField.compareFunction = test2_compareFunc;
  17.                 sortField.descending = checkBox.selected;
  18.  
  19.                 var oldSort:Sort = new Sort();
  20.                 oldSort.fields = [sortField];
  21.  
  22.                 xmlListColl.sort = oldSort;
  23.                 xmlListColl.refresh();
  24.             }
  25.  
  26.             private function sortNew():void {
  27.                 var sortField:SortField = new SortField();
  28.                 sortField.compareFunction = test3_compareFunc;
  29.                 sortField.descending = checkBox.selected;
  30.  
  31.                 var sort:Sort = new Sort();
  32.                 sort.fields = [sortField];
  33.  
  34.                 xmlListColl.sort = sort;
  35.                 xmlListColl.refresh();
  36.             } 
  37.  
  38.             private function resetSort():void {
  39.                 xmlListColl.sort = null;
  40.                 xmlListColl.refresh();
  41.             }
  42.  
  43.             private function dataGridCol_labelFunc(item:XML, col:DataGridColumn):String {
  44.                 return item.*.(@name == col.dataField).text();
  45.             }
  46.  
  47.             private function test2_compareFunc(itemA:XML, itemB:XML):int {
  48.                 var valueA:String = itemA.test2.text();
  49.                 var valueB:String = itemB.test2.text();
  50.                 return ObjectUtil.stringCompare(valueA, valueB);
  51.             }
  52.  
  53.             private function test3_compareFunc(itemA:XML, itemB:XML):int {
  54.                 var valueA:String = itemA.test3.text();
  55.                 var valueB:String = itemB.test3.text();
  56.                 return ObjectUtil.stringCompare(valueA, valueB);
  57.             }
  58.         ]]>
  59.     </mx:Script>
  60.  
  61.     <mx:XML id="tests" source="tests.xml" />
  62.     <mx:XMLListCollection id="xmlListColl" source="{tests.test}" />
  63.  
  64.     <mx:ApplicationControlBar dock="true">
  65.         <mx:CheckBox id="checkBox" label="descending:" labelPlacement="left" />
  66.  
  67.         <mx:Button label="Sort 'old'"
  68.                 click="sortOld();" />
  69.  
  70.         <mx:Button label="Sort 'new'"
  71.                 click="sortNew();" />
  72.  
  73.         <mx:Button label="Reset sort"
  74.                 click="resetSort();" />
  75.     </mx:ApplicationControlBar>
  76.  
  77.     <mx:DataGrid id="dataGrid"
  78.             dataProvider="{xmlListColl}"
  79.             width="300"
  80.             verticalScrollPolicy="on"
  81.             sortableColumns="true">
  82.         <mx:columns>
  83.             <mx:DataGridColumn dataField="old"
  84.                     labelFunction="dataGridCol_labelFunc"
  85.                     sortCompareFunction="test2_compareFunc" />
  86.             <mx:DataGridColumn dataField="new"
  87.                     labelFunction="dataGridCol_labelFunc"
  88.                     sortCompareFunction="test3_compareFunc"  />
  89.         </mx:columns>
  90.     </mx:DataGrid>
  91.  
  92. </mx:Application>

下面是测试用代码：

Download: tests.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <tests>
  3.     <test name="group1">
  4.         <test2 name="old">One (old)</test2>
  5.         <test3 name="new">Un (new)</test3>
  6.     </test>
  7.     <test name="group2">
  8.         <test2 name="old">Two (old)</test2>
  9.         <test3 name="new">Deux (new)</test3>
  10.     </test>
  11.  
  12.     <test name="group8">
  13.         <test2 name="old">Eight (old)</test2>
  14.         <test3 name="new">Huit (new)</test3>
  15.     </test>
  16. </tests>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , , , , , , , ,

Related Post

One comment | Add One

Trackbacks

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Recent Posts

Blogroll

Sponsored Ads