igGrid
は、表形式データの表示および操作に使用される jQuery ベースのクライアント側グリッドです。そのライフサイクル全体はクライアント側に存在し、サーバー側の技術からは独立しています。
igGrid
コントロールでは、次のように多数の異なる機能がサポートされています。
さらに、このグリッドは次もサポートしています。
新しい igGrid を簡単にアプリケーションに追加するには、Ignite UI CLI を使用します。
Ignite UI CLI のインストール:
npm install -g igniteui-cli
Ignite UI CLI インストール後、Ignite UI プロジェクトを生成し、新しい igGrid コンポーネントを追加してプロジェクトをビルドおよび公開すためにカスタム コマンドを実行するには、以下のコマンドを使用します。
ig new <project name>
cd <project name>
ig add grid newGrid
ig start
すべての利用可能なコマンドおよび詳細な情報については、「Ignite UI CLI の使用」のトピックを参照してください。
次のステップは、いずれかの jQuery クライアント コードを使用して、Web ページに jQuery グリッドの基本的な実装を作成する方法を示します。どの実装を選択するかについて詳細は、「Ignite UI for jQuery の概要」を参照してください。
最初に、アプリケーションに必要なローカライズ済みのリソースを含めます。組み込むリソースの詳細は、「Ignite UI for jQuery で JavaScript リソースを使用」ヘルプ トピックをご覧ください。
HTML ページに必要な JavaScript および CSS ファイルを参照してください。HTML の場合:
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.js" type="text/javascript"></script>
<script src="scripts/infragistics.core.js" type="text/javascript"></script><script src="scripts/infragistics.lob.js" type="text/javascript"></script>
<link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
<link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
次に、グリッドのデータ ソースとしての役割を果たす JSON 配列を参照して追加します。
<!--Sample JSON Data-->
<script src="http://www.igniteui.com/data-files/northwind.js"></script>
与えられたデータを描画するために igGrid が使用するテーブル DOM 要素を定義します。
HTML の場合:
<div style="height:300px;">
<table id="grid"></table>
</div>
上記のセットアップが完了したら、ID、columns、dataSource などのオプションを設定します。
columns - igGrid
の列オブジェクト定義。
headerText
- 列のヘッダーのテキスト。正しく動作しなくなる機能があるため、HTML タグを使用しないでください。key
- データ ソースのキー フィールドの名前。dataType
- 列のデータ型。「string」、「number」または「date」を指定できます。dataSource - igGrid
がデータを表示しているデータ。次のようなオプションがあります。
JavaScript の場合:
$(function () {
$("#grid").igGrid({
autoGenerateColumns: false,
renderCheckboxes: true,
primaryKey: "EmployeeID",
columns: [{
// note: if primaryKey is set and data in primary column contains numbers,
// then the dataType: "number" is required, otherwise, dataSource may misbehave
headerText: "Employee ID", key: "EmployeeID", dataType: "number"
},
{
headerText: "First Name", key: "FirstName", dataType: "string"
},
{
headerText: "Last Name", key: "LastName", dataType: "string"
},
{
headerText: "Title", key: "Title", dataType: "string"
},
{
headerText: "Birth Date", key: "BirthDate", dataType: "date"
},
{
headerText: "Postal Code", key: "PostalCode", dataType: "string"
},
{
headerText: "Country", key: "Country", dataType: "string"
}
],
dataSource: northwind,
dataSourceType: "json",
responseDataKey: "results",
height: "100%",
width: "100%",
tabIndex: 1,
features: [
{
name: "Selection",
mode: "row",
multipleSelection: true
},
{
name: "Paging",
pageSize: 5
},
{
name: "Filtering"
}
]
});
});
Web ページを実行します。igGrid
は JSON 配列にバインドし、データを表示します。
サンプル
オンラインで表示: GitHub