業務アプリデモ開発をベースにhifiveを学ぼう（4）「グリッドビューの紹介」
前回に引き続き業務アプリのデモを開発していきます。今回はちょっと趣向を変えてグリッドビューを紹介します。
すでに実装済みなグリッドビューが以下になります。
優先度、申請月を使ってデータのフィルタリングができます。
ヘッダーと左側の2カラムはスクロールしても表示は固定されています。
そして業務アプリとしてよくありがちなソートであったり、カラムのドラッグ&ドロップによる移動も可能です。
かなり多くの機能が実装されているのでコードについての詳細は省きますが、GitHubにて確認できます。対象は、
- lib/hifive/ui/datagrid.css
- lib/hifive/ui/datagrid.js
- js/GridViewerController.js
- js/grid/DatagridController.js
- js/grid/GridWrapperController.js
になります。
データの表示については js/AppPurchaseManagerController.js の __readyにて実装しています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| this._gridViewerController.setData(this._appLogic.searchPurchaseDatas()); |
ロジック（js/AppPurchaseManagerLogic.js）の searchPurchaseDatasから取得したデータを使って、グリッドビューコントローラにデータをセットしています。この処理では以下のようにgridWrapperController（js/grid/GridWrapperController.js）へ処理を送っています。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| setData: function(data, dummyColNums) { | |
| : | |
| this._gridWrapperController.setData(data, dummyColNums); | |
| this.$find('.dataLength').text(data.length); | |
| }, |
js/grid/DatagridController.jsがデータグリッドとしての機能を実装しています。データの表示、カラムの移動や固定、ソート、フィルタリングなどデータグリッドとして必要な機能がこの中で実現しています。
hifiveのUIライブラリであるグリッドビューを使うことで、業務システムにありがちな要件を備えたグリッドが実装できるようになります。
今回のコードはGitHubで見られるようになっています。また、動いているサンプルはこちらで確認できます。ぜひご覧ください。
hifive – HTML5企業Webシステムのための開発プラットフォーム
hifive開発者ブログ 
コメントは受け付けていません。