Flex DataGridのヨミガナによるソート

programming flex

Adobe FlexのDataGridには様々な機能が組み込まれています。そのうちの一つであるソート機能では、設定やコーディングなしでも数値の並べ替えなどを行うことができて重宝しますが、ご多分に漏れず、漢字で書かれた氏名を五十音順に並べ替えようとすると文字コード順にソートされてしまい、日本人の思惑通りに行きません。

五十音順のソートを実装するためには、ヨミガナを隠し列として保持した上で、その列の値を利用した比較関数を漢字列に指定する必要があります。非常に単純で、ポイントは以下の2点だけです：

  • 比較関数（yomiCompare）を定義する
  • 定義した比較関数を漢字の列のsortCompareFunction属性に設定する

以下の写真のように、sortCompareFunctionを指定しないと、{佐藤, 山本, 藍田}の順にソートされてしまいます。

sortCompareFunctionでヨミガナを利用した比較関数を指定すると、{藍田, 佐藤, 山本}と五十音順にソートできます。

<mx:DataGrid dataProvider="{contactsArr}">
  <mx:columns>
    <mx:DataGridColumn headerText="名前" dataField="name" sortCompareFunction="yomiCompare"/>
    <mx:DataGridColumn headerText="ヨミガナ" dataField="yomi" visible="false"/>
  </mx:columns>
</mx:DataGrid>

//DataGridのdataProvider
[Bindable]
public var contactsArr:ArrayCollection = new ArrayCollection([
    {name:"藍田", yomi:"アイダ"},
    {name:"佐藤", yomi:"サトウ"},
    {name:"山本", yomi:"ヤマモト"},
]);

//比較用関数
private function yomiCompare(sObj: Object, tObj: Object):int{
    var sStr:String = sObj["yomi"];
    var tStr:String = tObj["yomi"];
    var result:int = sStr.localeCompare(tStr);
    if(result > 0){
        return 1;
    }else if(result < 0){
        return -1;
    }
    return 0;
}

Flex勉強のメモです。