データの編集機能を実装する
UI Gridでは、グリッド上のデータをエンドユーザーに編集させることもできます。
<body ng-controller="MyController"> <div ui-grid="myGrid" ui-grid-edit ui-grid-cellnav></div> </body>
angular.module('myApp', [ 'ui.grid', 'ui.grid.edit', 'ui.grid.cellNav'])
.controller('MyController', ['$scope', function($scope) {
$scope.myGrid = {
enableCellEditOnFocus: true,
columnDefs: [
{
field: 'cid',
displayName: '商品コード',
cellClass: 'strong',
enableHiding: false,
enableCellEditOnFocus: false
},
...中略...
}
]
};
}]);
セルの編集機能を実装するには、グリッド要素（<div>要素）に対してui-grid-edit／ui-grid-cellnav属性を付与するとともに、現在のモジュールからからui.grid.edit／ui.grid.cellNavモジュールへの依存性を設定し、enableCellEditOnFocusパラメーターをtrueとします。ただし、商品コード列のように、キー情報は編集させたくない列については、列情報（columnDefs）として、enableCellEditパラメーターにfalseをセットします。
上の図のように、該当するセルにフォーカスを移動すると、セルが編集可能になることを確認してください。なお、ここでは画面上、セルの値を変更しているだけですが、変更した値はスコープ変数（ここではdata）に反映されていますので、一般的には、これを$httpサービスなどでサーバーに書き戻すことになるでしょう。
データのエクスポート機能を実装する
UI Gridで整形したデータは、カンマ区切りテキスト／タブ区切りテキストとしてダウンロードさせることもできます。
<body ng-controller="MyController"> <div ui-grid="myGrid" ui-grid-exporter></div> </body>
angular.module('myApp', [ 'ui.grid', 'ui.grid.exporter' ])
.controller('MyController', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
$scope.myGrid = {
enableGridMenu: true,
exporterCsvFilename: 'sample.txt',
exporterCsvColumnSeparator: '\t',
exporterMenuPdf: false,
...中略...
};
}]);
ボタンからエクスポート操作が可能にエクスポート機能を有効にするには、グリッド要素（<div>要素）に対してui-grid-exporter属性を付与するとともに、現在のモジュールからからui.grid.exporterモジュールへの依存関係を設定してください。
また、CSVエクスポートに関わるパラメーターとして、以下のようなものを設定しておきます。exporterCsvColumnSeparatorパラメーターを変更することで、たとえばタブ区切りテキストをダウンロードさせることもできます。
| パラメーター | 概要 |
|---|---|
| enableGridMenu | グリッド表のメニューを有効化 |
| exporterCsvFilename | デフォルトのダウンロードファイル名 |
| exporterCsvColumnSeparator | セルの区切り文字（デフォルトは「,」） |
まとめ
以上、本稿ではオブジェクト配列をもとにリッチなグリッド表を生成するUI Gridについて解説しました。UI Gridでは、本稿で紹介した他にも、グループ化、インポート機能、フィルターのカスタマイズ機能などなど、さまざまな機能を提供しています。本家ドキュメントも参照しながら、ぜひがっつりと使い込んでみてください。それだけの価値がある有用なモジュールです。
次回は、SPA（Single Page Application）開発には欠かせないルーティング機能を実装するUI Routerについて解説します。
参考資料
- 『AngularJSアプリケーションプログラミング』（技術評論社）
- 『AngularJSライブラリ 活用レシピ 厳選 108』（WINGSプロジェクト）
