igGrid に複合オブジェクトをバインドする

igGrid では列の mapper 関数を使用して複合オブジェクトが持つプロパティのデータをセルに表示することができます。マッピングはデータソースレベルで行われるため、並べ替えおよびフィルターは mapper 関数から返された値に基づいて実行されます。

以下のようにデータソースの各行データに person オブジェクトがあり firstName、lastName プロパティを持っているとします。

var data = [
	{"id":1, "person":{ "firstName":"千春","lastName":"林"}, "region": "佐賀県"},
	{"id":2, "person":{ "firstName":"なみ","lastName":"河本"}, "region": "沖縄県"},
.....
];

person 列に対して mapper 関数を設定し、lastName と firstName を合わせて「氏名」列として表示するようにします。

$("#grid1").igGrid(
	{
		columns:[
			{ key:"id", headerText:"ID", dataType:"number", width:"130px"},
			{ key:"person", headerText:"氏名", dataType:"object", width:"200px",
				mapper: function(record){
					return record.person.lastName + " " + record.person.firstName;
				}   
			},
			{ key:"region", headerText:"地域", dataType:"string", width:"200px"}
		],
.....
	}
);