プログラミング

2016.9.28 2016.9.28

AngularJSのUIグリッドについて

タグ:, ,

angularJS
こんちは!スケキョンです!
2015年から人気が上昇してきていると言われるAngulaJSのモジュール「UIグリッド」の設定について紹介させていただきます。

UIグリッドって何?

利用者が大量データからお目当ての情報を見つけやすくする為のソートやフィルター、ページングなどの機能を簡単に設定でき、作成者もシンプルなコードでグリッド表を作ることができるAngularJSモジュールの一つです。

使い方

HTML(VIEW)に

とグリッド表を表示したいソース箇所に記述します。

ContRollerに

シンプルなコードだとこれだけでグリッド表が表示できます。

設定項目の説明

  • columnDefs:列の設定を記述する箇所と示しており、その{}内に書かれている設定が本命です。
  • field:列に紐付けたいデータ名称
  • displayName:列名
  • data:グリッド表に表示したいデータ情報を持った配列要素です。

上記のように一緒に書かずとも

のように別個記述することも可能で表示したいデータ情報を更新したい時などに使います。

注意しないといけない個所は、3点あります。

  1. モジュール定義に「ui.grid」を記述する事する事。
  2. 「data」に設定したデータ情報のデータ名と「filed」に設定した名称が一致いていないとデータが表示されなく、無駄な時間を使ってしまいます。
  3. 「columnDefs」は、記述しなくても問題なく列名には、「data」に設定した配列要素のデータ名がが表示されます。

便利な設定

次にソートやフィルター,ページングなどの利用者が見やすくなる為の機能設定について説明します。

HTML(VIEW)にページング用のディレクティブを設置する為に、

「ui-grid-pagination 」を追記します。

設定項目の説明

  • enableSorting:ソート機能をtrue・falseで制御し、項目を項目ごとまたは一括で設定できます。デフォルトは、trueです。
  • enableFiltering:フィルター機能をtrue・falseで制御します。デフォルトは、falseです。
  • paginationPageSizes:セレクトボックスにて一ページに表示できる件数を設定できます。(カンマ区切りで複数設定可)
  • paginationPageSize:初期表示時の件数を設定します。

注意しないといけない箇所は、3点あります。

  1. モジュール定義に「ui.grid.pagination」を記述する事。
  2. HTML(VIEW)に「ui-grid-pagination 」を追記する事。
  3. 「enableSorting」を項目ごとに設定する場合は、falseしか設定できない事。

おまけ

HTML(VIEW)に選択表示用のディレクティブを設置する為に、

「ui-grid-selection」を追記します。

設定項目の説明

  • multiSelect:複数行選択の可能か不可能かをtrue・falseで制御します。デフォルトはtrueです。
  • enableFullRowSelection:行を選択可能か不可能かをtrue・falseで制御します。デフォルトはfalseです。
  • cellTemplate:列に対して独自のHTMLソースを設定する事が可能です。
  • rowTemplate:行に対して独自のHTMLソースを設定する事が可能です。

注意しないといけない箇所は、1点あります。

  1. 「cellTemplate」や「rowTemplate」に独自のHTMLソースを設定するとUIグリッドの機能が適用されない事あります。

最後に

UIグリッドの説明はいかがでしたでしょうか?

今回はじめて使ってみたのですが、あまり日本語で説明が載っているサイトがなく、英語や別グリッド(NGグリッドやAGグリッド)などしかなかった為、よく使用する機能の分かった事や注意したほうがいいと思った事を書かせていただきました。

いまだに使いきれていない為、今後も勉強し、便利だと思った事や注意したほうがいいと思った事などが溜まったら投稿していきたいと思います。