なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。
はじめに
アプリで扱うデータが大量になった場合、これをひとつのグリッド表でずらっと並べるのは、あまり得策ではありません。スクロールしてしまえばタイトル行が見えなくなり、それだけでも各列の情報は見づらくなります。そもそも巨大な表の中から目的のデータを探し出すのは、ユーザーに優しいつくりとはいえません。
そこで、グリッド表にソート機能、フィルター機能、ページング機能などを付与して、一度に見せるデータを絞り込むようなしくみを実装するのが一般的です。そして、これらの機能をごくシンプルなコードで実装可能にするのが、UI Gridの役割です。
対象読者
- AngularJSについて基本的な概念を理解している方
- AngularJSで利用できる拡張モジュールに興味がある方
- 大量のデータをスマートにグリッド表示したいと考えている方
検証環境
この記事では、以下の環境でサンプルの動作を確認しています。
- AngularJS 1.4.3
- UI Grid 3.0.4
- Chrome 44
- Firefox 39
- Internet Explorer 11
UI Gridは、Bowerを利用することで、以下のコマンドでインストールできます。Bowerに関する詳細は、別稿「Web開発ライブラリを自動的に入手できるパッケージ管理ツールBower」を参照してください。
> bower install angular-ui-grid
基本的なグリッド表を実装する
まずは、ソート／フィルター／ページングなどの機能を持たない、ごくシンプルなグリッド表を、UI Gridを使って実装してみます。以降は、ここでのサンプルをベースに、さまざまな追加機能を組み込んでいくものとします。
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8" /> <title>AngularJS</title> <link rel="styleSheet" href="bower_components/angular-ui-grid/ui-grid.min.css" /> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-ui-grid/ui-grid.min.js"></script> <script src="scripts/grid_basic.js"></script> </head> <body ng-controller="MyController"> <div ui-grid="myGrid"></div> </body> </html>
angular.module('myApp', [ 'ui.grid'])
.controller('MyController', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
$scope.myGrid = {
columnDefs: [
{
field: 'cid',
displayName: '商品コード',
},
{
field: 'name',
displayName: '商品名'
},
{
field: 'price',
displayName: '価格'
},
{
field: 'from',
displayName: '産地'
},
{
field: 'ship',
displayName: '出荷日'
}
],
data: [
{
cid: '1164',
name: '幸水なし',
price: 3240,
from: '千葉県',
ship: new Date(2015, 6, 28)
},
...中略...
]
};
}]);
UI Gridを利用するには、まず以下のライブラリ／スタイルシートをインポートした上で、現在のモジュールからはui.gridモジュールへの依存関係を設定します。
- ui-grid.min.js（ライブラリ）
- ui-grid.min.css（スタイルシート）
グリッド表を定義するには、表示する領域を表す<div>要素に対して、ui-grid属性を付与するだけです。属性には、グリッド表の情報を、columnDefs（列定義）／data（データ本体）パラメーターからなるハッシュを渡します。
dataパラメーターには、グリッド表に表示すべきデータモデルを「プロパティ名: 値」ハッシュの配列として指定します。
columnDefsパラメーターには、最低限、以下のサブパラメーターを渡します。
- field（列に関連付く項目のプロパティ名）
- displayName（タイトル行の表示名）
columnDefsパラメーターは、正しくは必須ではありませんが、指定しなかった場合には、タイトル行がdataプロパティで指定したキー名（一般的には英語名）となってしまいます。明示的に日本語タイトルを宣言しておくのが望ましいでしょう。
