Mar 09

Flex的DataGrid控件中如何实现数字以及区分/不区分大小写字母的排序的例子

FlexAdd comments

下面的例子展示了利用sortCompareFunction属性，静态的ObjectUtil.numericCompare() 和ObjectUtil.stringCompare()事件，通过设置DataGridColumn中的自定义的比较函数，来实现数字以及区分或者不区分大小写字母的排序。

下面是具体的程序代码：


Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2008/03/07/performing-case-insensitive-sorts-using-the-datagrid-control-in-flex/ -->
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.utils.ObjectUtil;
  11.  
  12.             private function index_sortCompareFunc(itemA:Object, itemB:Object):int {
  13.                 // Make sure itemA has an "index" property.
  14.                 if (!itemA.hasOwnProperty("index")) {
  15.                     itemA.index = null;
  16.                 }
  17.                 // Make sure itemB has an "index" property.
  18.                 if (!itemB.hasOwnProperty("index")) {
  19.                     itemB.index = null;
  20.                 }
  21.                 // Perform a numeric sort.
  22.                 return ObjectUtil.numericCompare(itemA.index, itemB.index);
  23.             }
  24.  
  25.             private function value_sortCompareFunc(itemA:Object, itemB:Object):int {
  26.                 // Make sure itemA has a "value" property.
  27.                 if (!itemA.hasOwnProperty("value")) {
  28.                     itemA.value = null;
  29.                 }
  30.                 // Make sure itemB has a "value" property.
  31.                 if (!itemB.hasOwnProperty("value")) {
  32.                     itemB.value = null;
  33.                 }
  34.                 /**
  35.                  * Perform a string sort. If the checkbox is selected
  36.                  * do a case insensitive sort, otherwise, dont.
  37.                  */
  38.                 return ObjectUtil.stringCompare(itemA.value, itemB.value, checkBox.selected);
  39.             }
  40.         ]]>
  41.     </mx:Script>
  42.  
  43.     <mx:ArrayCollection id="arrColl">
  44.         <mx:source>
  45.             <mx:Array>
  46.                 <mx:Object index="1" value="apple" />
  47.                 <mx:Object index="200" value="Bear" />
  48.                 <mx:Object index="3" value="corn" />
  49.                 <mx:Object index="40" value="Dragon" />
  50.                 <mx:Object value="eggplant" />
  51.                 <mx:Object index="5" />
  52.             </mx:Array>
  53.         </mx:source>
  54.     </mx:ArrayCollection>
  55.  
  56.     <mx:ApplicationControlBar dock="true">
  57.         <mx:CheckBox id="checkBox"
  58.                 label="case insensitive search:"
  59.                 labelPlacement="left"
  60.                 selected="true" />
  61.     </mx:ApplicationControlBar>
  62.  
  63.     <mx:DataGrid id="dataGrid" dataProvider="{arrColl}">
  64.         <mx:columns>
  65.             <mx:DataGridColumn dataField="index"
  66.                     sortCompareFunction="index_sortCompareFunc" />
  67.             <mx:DataGridColumn dataField="value"
  68.                     sortCompareFunction="value_sortCompareFunc" />
  69.         </mx:columns>
  70.     </mx:DataGrid>
  71.  
  72. </mx:Application>

下面是实际运行效果：

原文作者：Peter deHaan 翻译：minidxer

written by Minidxer  |  tags: , , , , , ,

Related Post

2 Responses to “Flex的DataGrid控件中如何实现数字以及区分/不区分大小写字母的排序的例子”

  1. trade Says:
    March 9th, 2008 at 1:37 am

    转了一圈,不小心跑到你博客上来了.我是IDCSPY上的小猪船长,呵呵…从前博客上跑来的,你在里面骂那个人白痴!

  2. Minidxer Says:
    March 9th, 2008 at 11:51 am

    呵呵，当时看到他炒作的太厉害了，比较反感所以才。。。
    后来想想人家自己的博客，想怎么样就怎么样，其实也没什么好指责的

Leave a Reply