IgGrid 入門編

jQuery グリッド:
igGrid 入門編

セッションレベル : 200 – Basic
Daizen Ikehara : Marketing & Developer Evangelist
dikehara@infragistics.com
Twitter @Neri78

アジェンダ
1 / NetAdvantage for jQuery / igGrid 概要
2 / Infragistics Loader
3 / igGrid : データ表示
4 / igGrid : 機能セットと有効化
5 / igGrid : イベントハンドリング
6 / まとめ、リソース

1.
NetAdvantage
for jQuery
igGrid
概要

NetAdvantage シリーズ

Web / RIA Reporting
Win / Rich Mobile
Client

NetAdvantage

 高パフォーマンス

 HTML4 + 5
Jquery UI
 豊富な高機能
ベースコント UI ウィジェット
 グリッド
ロール  チャート
 ツリー
jQuery / jQuery UI /  マップ (CTP)
jQuery Mobile を
ベースに独自 UI, 機能  スタイルサポート
を提供
 ASP.NET MVC
ラッパー提供

 jQuery Mobile 対応
UI ウィジェット

igGrid

• 軽量化・仮想化
された
高パフォーマンス
グリッド

• 階層表示機能

• フィルタリング

• グループ化

• 集計

LOB (業務用）
アプリケーションに
対応

igGrid:
HTML5, CSS3,
対応状況

HTML5 マークアップ未使用
HTML5 API 未使用
CSS3 スタイリング/ グリッド更新中における
アニメーションアニメーション効果
旧ブラウザーでの制限アニメーションが
表示されない
ただし、全ての機能を
実行可能

 jQuery / jQuery UI を利用する場合は
スクリプトファイル、CSS ファイルの参照が必要
JS ライブラリー
利用時のリソース参照

 NetAdvantage for jQuery の関連ファイルは膨大

 Infragistics Loader を利用することで関連リソース
の参照、読み込みを自動化
Infragistics Loader 使用前

使用後

 Infragistics Loader の初期化

<script type="text/javascript">
// igLoader の読み込み
Infragistics Loader $.ig.loader({
からの呼び出し方法 scriptPath: 'Scripts/IG',
cssPath: 'Content/IG'
});

</script>

 リソース指定をし、初期化する場合

<script type="text/javascript">
// igLoader の読み込み
$.ig.loader({ 読み込み
scriptPath: 'Scripts/IG', リソース
cssPath: 'Content/IG',
resources: 'igGrid.*',
ready: function () {
// Do something
}
}); コンポーネント
</script> 呼び出しなどの処理

データソース指定
// グリッドの呼び出し
 データソース、列指定 $("#grid1").igGrid({
dataSource: products,
columns: [
{
headerText: "Product ID",
key: "ProductID",
dataType: "number"
},
{
headerText: "Product Name",
key: "Name",
列指定: dataType: "string"
autoGenerateColumns を },
true とし、グリッドに {
作成させることも可能 headerText: "Product Number",
列のデータ型:
key: "ProductNumber",
number, string, bool, date
dataType: "string"
},
]
});

igGrid データバインディング

DEMO

4.
igGrid:
機能セットと
有効化

 ビルトイン機能
 igGrid 機能並べ替え（ソート）選択(セル、行) 列の非表示
“Sorting” “Selection” “Hiding”
グループ化ツールチップ列集計
“GroupBy” “ToolTips” “Summaries”
行セレクター列テンプレートフィルタリング
“RowSelectors” (Column “Filtering”
オブジェクト
内で定義)
ページング列サイズ変更更新（編集、追
“Paging” “Resiging” 加、削除)
“Updating”

 機能 API
http://help.infragistics.com/jQuery/2012.1/

 機能 API
 機能API http://help.infragistics.com/jQuery/2012.1/

 features コレクションで機能を宣言
 機能の有効化
// グリッドの呼び出し
$("#grid1").igGrid({
…
features: [
{
name: 'Sorting',
mode: 'multi'
},
{
name: 'Hiding'
}
]
});

igGrid 機能の有効化

DEMO

5.
igGrid:
イベント
ハンドリング

 ビルトイン機能
 イベントハンドリング並べ替え（ソート）選択(セル、行) 列の非表示
GroupBy ツールチップ列集計
行セレクター列テンプレートフィルタリング
ページング列サイズ変更編集

igGrid そのもの、あるいは上記機能において
各種イベントが用意されている。
例:
ColumnSorting
ColumnSorted
editCellStarting
editCellStarted
rowAdding
rowAdded

 イベント API
 イベントAPI http://help.infragistics.com/jQuery/2012.1/

1. グリッド初期化時にハンドラーを設定

 イベントハンドリング
の設定
$("#grid1").igGrid({
features: [
{
name: 'Sorting',
mode: 'multi',
columnSorted: function (evt, ui) {
alert(ui.columnKey);
}
}

2. 初期化後に任意のタイミングでハンドラーを設定
この場合は、jQuery のイベント設定を利用
bind(), live(), on() など
 イベントハンドリング
の設定

// ボタンクリック時のイベントハンドラー
$('#btn1').live('click', function () {
// グリッドに対してイベントハンドラーを設定
$('#grid1').live("iggridsortingcolumnsorted",
function (evt, ui) {
alert(ui.columnKey + " が " +
ui.direction + " 方向にソートされ
ました");
});
});

igGrid イベントハンドリング

DEMO

まとめ igGrid 入門編
igGrid 概要
Infragistics Loader
igGrid データバインディング
igGrid 機能設定
igGrid イベントハンドリング

リソース  HTML5
 HTML5 チートシート
http://www.inmotionhosting.com/infographi
cs/html5-cheat-sheet/
 ブラウザー対応状況
http://www.findmebyip.com/litmus/

 jQuery
 jQuery
http://jquery.com/
 jQuery UI
http://jqueryui.com/

 NetAdvantage for jQuery
 製品紹介
http://jp.infragistics.com
 オンラインサンプル
http://samples.jp.infragistics.com/
 Blog
http://blogs.jp.infragistics.com/blogs/
 オンライン API
http://help.infragistics.com/jQuery/2012.1/

IgGrid 入門編

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (17)

Similaire à IgGrid 入門編

Similaire à IgGrid 入門編 (20)

Plus de Daizen Ikehara

Plus de Daizen Ikehara (20)

Dernier

Dernier (9)

IgGrid 入門編