AS3でDataGridのソートを文字列から数値にする

via. DataGridのソートについて質問 – Flex User Group

DataGridコンポーネントは、そのままだとヘッダをクリックしたときにソートされる並び順は「文字列の比較」になります。データの中身が数値だとしても、「1,2,3,5,10,20,100」というデータをソートしようとしたときに「1,10,100,2,20,3,5]のようになってしまいます。これはよくない。数値データのソートなら、数値で降順昇順を決めるべきです。

なので、flexでいうところの sortCompareFunction をFlashで使うときはどうすりゃいいの、というところですが、結論から書くとこうなりました。

import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
var mydg:DataGrid = getChildByName("myDG") as DataGrid;
var myXML:XML = new XML(
<data>
<drink>
<name>juice</name>
<category>SOFTdrink</category>
<price>150</price>
</drink>
<drink>
<name>tea</name>
<category>SOFTdrink</category>
<price>80</price>
</drink>
<drink>
<name>beer</name>
<category>alcoholic</category>
<price>500</price>
</drink>
<drink>
<name>coffee</name>
<category>SOFTdrink</category>
<price>320</price>
</drink>
<drink>
<name>umeshu</name>
<category>alcoholic</category>
<price>260</price>
</drink>
</data>
);
var dp:DataProvider = new DataProvider(myXML);
mydg.addColumn(new DataGridColumn("name"));
mydg.addColumn(new DataGridColumn("category"));
mydg.addColumn(new DataGridColumn("price"));
//nameフィールドはソートできないようにする
mydg.columns[0].sortable=false
//priceフィールドのソートはソート関数を使う
mydg.columns[2].sortCompareFunction=sortNumber;
//DataGridの中身をセット
mydg.dataProvider = dp;
//最初はカテゴリーでソートしておく
mydg.sortItemsOn("category")
//ソート関数☆ここがポイント!!
function sortNumber(obj1: Object, obj2: Object):int {
var value1:Number = Number(obj1.price);
var value2:Number = Number(obj2.price);
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}

なるほどですね。sortCompareFunction はDataGrid自体じゃなく、DataGridColumn に対してセットする、ということでした。いちいちヘッダーにaddEventListenerしようとしてたアホな僕も少しは前進できました。

上の例そのまんまですがソースはこちら。(CS3 .fla形式)

この記事には、カテゴリ AS3 タグは , がつけられています。