このトピックでは、igGrid
™ コントロールの基本的な列テンプレートを作成する方法を紹介します。
このトピックは、以下のセクションで構成されます。
この例では、基本的な列テンプレートをグリッドに適用します。追加の非バインド列がグリッドに追加されます。セルにボタンを描画するテンプレートを持ちます。
以下のスクリーンショットは最終結果のプレビューです。赤いアウトラインで囲まれた列にのみ列テンプレートが適用されます。
手順を完了するには空の HTML ページが必要です。
以下のステップでは、igGrid
の基本的な列テンプレートを作成する方法を紹介します。
HTML ページを準備
HTML ページを準備するには、igLoader
を追加し、igGrid
リソースをロードするよう構成します。
JavaScript の場合:
<script src="http://localhost/ig_ui/js/infragistics.loader.js"></script>
<script type="text/javascript">
$.ig.loader({
scriptPath: "http://localhost/ig_ui/js/",
cssPath: "http://localhost/ig_ui/css/",
resources: "igGrid"
});
</script>
列テンプレートを追加して適用
ページにサンプル データを追加し、ページの本文にテーブル タグ付けします。
JavaScript の場合:
<script src="http://www.igniteui.com/data-files/adventureworks.min.js"></script>
HTML の場合:
<body>
<table id="grid1"></table>
</body>
列テンプレートを設定した igGrid を追加します。
JavaScript の場合:
<script type="text/javascript">
$.ig.loader(function () {
$("#grid").igGrid({
autoGenerateColumns: false,
width: "100%",
height: "500px",
columns: [
{ headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%" },
{ headerText: "Product Name", key: "Name", dataType: "string", width: "25%" },
{ headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "25%" },
{ headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "15%" },
{
headerText: "",
key: "Delete",
dataType: "string",
width: "20%",
unbound: true,
template: "<input type='button' onclick='deleteRow(${ProductID})' value='Delete row' class='delete-button'/>"
}
],
primaryKey: "ProductID",
dataSource: adventureWorks
});
});
</script>
行を削除する関数を作成します。
JavaScript の場合:
<script type="text/javascript">
function deleteRow(rowId) {
var grid = $("#grid").data("igGrid");
grid.dataSource.deleteRow(rowId);
grid.commit();
}
</script>
結果を確認します。
以下のサンプルは結果のプレビューです。
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
オンラインで表示: GitHub