今回から何回かに分けて、hifiveのデータグリッドライブラリの使い方を紹介していきます。まず今回は基本形の紹介です。
今回のデータグリッドは次のような特徴を持っています。
- ヘッダーが固定表示
- データをスクロールしてもヘッダーは固定
- ヘッダーでソート
- 行を選択するとハイライト
なお、デモはこちらでご覧いただけます。
HTMLについて
今回はデザインにBootstrapを使っています。そのため幾つかのdivタグが追加されています。基本的にはdiv#gridが指定されているだけです。
CSSについて
グリッドの装飾を幾つか行っています。
JavaScriptについて
JavaScriptではまず、幾つかの必要な設定を行います。
これらはグリッド表示で使われるハンドラーと、グリッドライブラリ本体です。
初期値について
データグリッドを利用する際には表示の初期設定を行う必要があります。詳しくは別記事で紹介します。
コントローラの記述
そしてデータグリッドのコントローラ記述です。メタ情報で#gridを指定します。
初期表示について
そしてグリッドのデータ表示部分です。今回は簡単なデータ生成を行った後、それをデータソースとしてグリッドに適用しています。
デモはこちらでご覧いただけます。
これでデータグリッド表示の基本形ができあがりました。次回以降、データグリッドを選択した場合や横スクロール対応などを紹介します。
