製品版のみの機能
グリッド - 複合オブジェクトの処理
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルは、列のマッパー関数により複合データ オブジェクトを処理する方法を紹介します。
マッパー関数は、戻り値が特定の列に関連するすべてのデータ操作で使用されるデータ レコードからの複合データ抽出のために使用できます。 並べ替えおよびフィルタリング操作は、マッパー関数から返された値に基づいて実行されます。 コンボ エディターによる更新は、選択したコンボ項目のレコード データと複合オブジェクト全体を更新します。
マッパー関数は、戻り値が特定の列に関連するすべてのデータ操作で使用されるデータ レコードからの複合データ抽出のために使用できます。 並べ替えおよびフィルタリング操作は、マッパー関数から返された値に基づいて実行されます。 コンボ エディターによる更新は、選択したコンボ項目のレコード データと複合オブジェクト全体を更新します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<style>
#grid_container {
width: 100%;
}
</style>
</head>
<body>
<table id="grid"></table>
<script>
$(function () {
var northWindCategoriesJSON = [
{ "ID": 0, "Name": "食品" },
{ "ID": 1, "Name": "飲料" },
{ "ID": 2, "Name": "電子機器" }
];
var northwindProductsJSON = [
{ "ID": 0, "Name": "パン", "Description": "全粒粉パン", "ReleaseDate": "\/Date(694224000000)\/", "DiscontinuedDate": null, "Rating": 4, "Price": "2.5", "Category": { "ID": 0, "Name": "食品" } },
{ "ID": 1, "Name": "ミルク", "Description": "低脂肪乳", "ReleaseDate": "\/Date(812505600000)\/", "DiscontinuedDate": null, "Rating": 3, "Price": "3.5", "Category": { "ID": 1, "Name": "飲料" } },
{ "ID": 2, "Name": "ビント ソーダ", "Description": "アメリカン バラエティ - 6 つのフレーバー", "ReleaseDate": "\/Date(970358400000)\/", "DiscontinuedDate": null, "Rating": 3, "Price": "20.9", "Category": { "ID": 1, "Name": "飲料" } },
{ "ID": 3, "Name": "ハビナ ソーダ", "Description": "元祖ライム ソーダ", "ReleaseDate": "\/Date(1128124800000)\/", "DiscontinuedDate": "\/Date(1159660800000)\/", "Rating": 3, "Price": "19.9", "Category": { "ID": 1, "Name": "飲料" } },
{ "ID": 4, "Name": "フルーツ ソーダ", "Description": "マンゴ フレーバー 8.3 オンス缶 (24 パック)", "ReleaseDate": "\/Date(1041724800000)\/", "DiscontinuedDate": null, "Rating": 3, "Price": "22.99", "Category": { "ID": 1, "Name": "飲料" } },
{ "ID": 5, "Name": "クランベリー ジュース", "Description": "16 オンス ボトル (12 パック)", "ReleaseDate": "\/Date(1154649600000)\/", "DiscontinuedDate": null, "Rating": 3, "Price": "22.8", "Category": { "ID": 1, "Name": "飲料" }, },
{ "ID": 6, "Name": "ピンク レモネード", "Description": "36 オンス缶 (3 パック)", "ReleaseDate": "\/Date(1162684800000)\/", "DiscontinuedDate": null, "Rating": 3, "Price": "18.8", "Category": { "ID": 1, "Name": "飲料" }, },
{ "ID": 7, "Name": "DVD プレーヤー", "Description": "1080P DVD プレーヤー", "ReleaseDate": "\/Date(1163548800000)\/", "DiscontinuedDate": null, "Rating": 3, "Price": "35.88", "Category": { "ID": 2, "Name": "電子機器" } },
{ "ID": 8, "Name": "LCD HDTV", "Description": "42 インチ 1080p LCD (ブルーレイ プレーヤー内臓)", "ReleaseDate": "\/Date(1210204800000)\/", "DiscontinuedDate": null, "Rating": 3, "Price": "1088.8", "Category": { "ID": 2, "Name": "電子機器" } }
];
$("#grid").igGrid({
dataSource: northwindProductsJSON, //JSON Array with a complex Category object defined above
primaryKey: "ID",
autoCommit:true,
width:"100%",
autoGenerateColumns: false,
columns: [
{ headerText: "", key: "ID", dataType: "number", hidden: true },
{ headerText: "製品名", key: "Name", dataType: "string" },
{ headerText: "説明", key: "Description", dataType: "string" },
{ headerText: "カテゴリ", key: "Category", dataType: "object", mapper: function (record) {
return record.Category.Name;
}
}
],
features: [
{
name: "Filtering"
},
{
name: "Sorting"
},
{
name: "Updating",
editMode: "cell",
columnSettings: [
{
columnKey: "Category",
editorType: "combo",
editorOptions: {
dataSource: northWindCategoriesJSON,
textKey: "Name",
valueKey: "ID",
mode: "dropdown"
}
}
]
}
]
});
});
</script>
</body>
</html>