IgGrid 入門編

3,197
-1

Published on

NetAdvantage for jQuery の グリッドコントロール、igGrid の入門編です。

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,197
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

IgGrid 入門編

  1. 1. jQuery グリッド:igGrid 入門編セッションレベル : 200 – BasicDaizen Ikehara : Marketing & Developer Evangelistdikehara@infragistics.comTwitter @Neri78
  2. 2. アジェンダ1 / NetAdvantage for jQuery / igGrid 概要2 / Infragistics Loader3 / igGrid : データ表示4 / igGrid : 機能セットと有効化5 / igGrid : イベントハンドリング6 / まとめ、リソース
  3. 3. 1.NetAdvantagefor jQueryigGrid概要
  4. 4. NetAdvantage シリーズ Web / RIA ReportingWin / Rich MobileClient NetAdvantage
  5. 5.  高パフォーマンス  HTML4 + 5Jquery UI  豊富な高機能ベース コント UI ウィジェット  グリッドロール  チャート  ツリーjQuery / jQuery UI /  マップ (CTP)jQuery Mobile をベースに独自 UI, 機能  スタイル サポートを提供  ASP.NET MVC ラッパー提供  jQuery Mobile 対応 UI ウィジェット
  6. 6. igGrid• 軽量化・仮想化 された 高パフォーマンス グリッド• 階層表示機能• フィルタリング• グループ化• 集計LOB (業務用)アプリケーションに対応
  7. 7. igGrid:HTML5, CSS3,対応状況 HTML5 マークアップ 未使用 HTML5 API 未使用 CSS3 スタイリング/ グリッド更新中における アニメーション アニメーション効果 旧ブラウザーでの制限 アニメーションが 表示されない ただし、全ての機能を 実行可能
  8. 8. 2.InfragisticsLoader
  9. 9.  jQuery / jQuery UI を利用する場合は スクリプト ファイル、CSS ファイルの参照が必要JS ライブラリー利用時のリソース参照  NetAdvantage for jQuery の関連ファイルは膨大
  10. 10.  Infragistics Loader を利用することで関連リソース の参照、読み込みを自動化Infragistics Loader 使用前 使用後
  11. 11.  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> 呼び出しなどの処理
  12. 12. 3.igGrid:データ表示
  13. 13.  対応データ形式
  14. 14. データ ソース指定 // グリッドの呼び出し データソース、列指定 $("#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" }, ] });
  15. 15. igGrid データ バインディングDEMO
  16. 16. 4.igGrid:機能セットと有効化
  17. 17.  ビルトイン機能 igGrid 機能 並べ替え(ソート) 選択(セル、行) 列の非表示 “Sorting” “Selection” “Hiding” グループ化 ツールチップ 列集計 “GroupBy” “ToolTips” “Summaries” 行セレクター 列テンプレート フィルタリング “RowSelectors” (Column “Filtering” オブジェクト 内で定義) ページング 列サイズ変更 更新(編集、追 “Paging” “Resiging” 加、削除) “Updating”  機能 API http://help.infragistics.com/jQuery/2012.1/
  18. 18.  機能 API 機能API http://help.infragistics.com/jQuery/2012.1/
  19. 19.  features コレクションで機能を宣言 機能の有効化 // グリッドの呼び出し $("#grid1").igGrid({ dataSource: products, … features: [ { name: Sorting, mode: multi }, { name: Hiding } ] });
  20. 20. igGrid 機能の有効化DEMO
  21. 21. 5.igGrid:イベントハンドリング
  22. 22.  ビルトイン機能 イベントハンドリング 並べ替え(ソート) 選択(セル、行) 列の非表示 GroupBy ツールチップ 列集計 行セレクター 列テンプレート フィルタリング ページング 列サイズ変更 編集 igGrid そのもの、あるいは上記機能において 各種イベントが用意されている。 例: ColumnSorting ColumnSorted editCellStarting editCellStarted rowAdding rowAdded
  23. 23.  イベント API イベントAPI http://help.infragistics.com/jQuery/2012.1/
  24. 24. 1. グリッド初期化時にハンドラーを設定 イベントハンドリング の設定 $("#grid1").igGrid({ dataSource: products, features: [ { name: Sorting, mode: multi, columnSorted: function (evt, ui) { alert(ui.columnKey); } }
  25. 25. 2. 初期化後に任意のタイミングでハンドラーを設定 この場合は、jQuery のイベント設定を利用 bind(), live(), on() など イベントハンドリング の設定 // ボタンクリック時のイベントハンドラー $(#btn1).live(click, function () { // グリッドに対してイベントハンドラーを設定 $(#grid1).live("iggridsortingcolumnsorted", function (evt, ui) { alert(ui.columnKey + " が " + ui.direction + " 方向にソートされ ました"); }); });
  26. 26. igGrid イベント ハンドリングDEMO
  27. 27. 6.まとめリソース
  28. 28. まとめ igGrid 入門編 igGrid 概要 Infragistics Loader igGrid データ バインディング igGrid 機能設定 igGrid イベントハンドリング
  29. 29. リソース  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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×