グリッド：データマップ

実際にグリッドに格納されているデータとは違う値がセルに表示されるように、列の値をマップしたいことはよくあります。

たとえば、0から3までの値が入る列「rating」に、代わりの文字列「低」、「中」、「高」を表示する場合などです。

また、顧客IDが入った「顧客」列に対して、代わりに顧客名を表示したい場合もあります。

どちらのタスクもformatItemイベントを使用して実行できますが、FlexGridでは、さらに優れた機能としてDataMapsが提供されています。列のdataMapプロパティにDataMapのインスタンスを設定すると、グリッドはそれを使用して以下のように動作します。

各データ項目に対応する表示値を検索します。
セルを編集するときに、有効な項目をドロップダウンリストで提供します。

たとえば、次のグリッドの「顧客」列には、顧客名とIDを関連付けるDataMapが設定されています。データソースには顧客IDが含まれていますが、グリッドには代わりに顧客の名前が表示されます。また、各項目に対して顧客を選択するためのドロップダウンリストが提供されます。

また、このグリッドは、「国」列にもdataMapを割り当てています。この場合のマップは、国名が入った単なる文字列配列です。実際のマッピングは存在しませんが、やはり選択に使用できるドロップダウンリストが表示されます。リストにない国は入力できません。

例：

// ランダムデータを作成します
var countries = 'アメリカ,ドイツ,イギリス,日本,スウェーデン,ノルウェー,デンマーク'.split(',');
var customers = [
    { id: 0, name: '成宮 真紀', address: '愛知県春日井市味美白山町 1-9-X' },
    { id: 1, name: '山本 雅治', address: '福岡県粕屋郡志免町御手洗 51-X' },
    { id: 2, name: '加藤 泰江', address: '茨城県牛久市下根町 1504-XX' },
    { id: 3, name: '川村 匡', address: '広島県広島市西区観音新町 1-16-X' },
];
var data = [];
for (var i = 0; i < countries.length; i++) {
    data.push({
        id: i,
        country: countries[i],
        customer: customers[i % customers.length].id,
        active: i % 5 != 0,
        downloads: Math.round(Math.random() * 200000),
        sales: Math.random() * 100000,
        expenses: Math.random() * 50000
    });
}

// 顧客データマップを作成します
var customerMap = new wijmo.grid.DataMap(customers, 'id', 'name');

// データをグリッドに表示します
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    showAlternatingRows: false,
    autoGenerateColumns: false,
    columns: [
        { binding: 'customer', header: '顧客', width: '1.5*', dataMap: customerMap },
        { binding: 'country', header: '国', width: '*', dataMap: countries },
        { binding: 'downloads', header: 'DL数', width: '*', format: 'n0' },
        { binding: 'sales', header: '売上', width: '*', format: 'n0' },
        { binding: 'expenses', header: '費用', width: '*', format: 'n0' }
    ],
    itemsSource: data,
});

グリッド：データマップ