AngularJSアプリでソート／ページングやフィルター機能付きの高機能グリッド表を実装する（UI Grid）

AngularJSアプリ開発を支援する便利モジュール 第3回

セルの値／スタイルを変更する

　columnDefsパラメーターには、その他にも、以下のようなサブパラメーターが用意されており、セルの値を加工したり、ヘッダー／データ部のスタイルを変更したり、といったことが可能です。

セルの表示に関わるパラメーター

パラメーター	概要
cellClass	セルに適用するスタイルクラス
cellFilter	セルに適用するフィルター
cellTooltip	ツールチップを表示するか
displayName	タイトル行の表示名
enableHiding	セルの非表示機能を有効にするか
field	列に関連づけるデータフィールド
headerCellClass	ヘッダーセルに適用するスタイルクラス
headerCellFilter	ヘッダーセルに適用するフィルター
maxWidth	最大幅
minWidth	最小幅
width	幅

　以下に、具体的な例もみてみましょう。

リスト3　セルの値／スタイルの変更する例（grid_cell.js）

angular.module('myApp', [ 'ui.grid'])
  .controller('MyController', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
    $scope.myGrid = {
      columnDefs: [
        {
          field: 'cid',
          displayName: '商品コード',
          cellClass: 'strong',
          enableHiding: false
        },
        {
          field: 'name',
          displayName: '商品名'
        },
        {
          field: 'price',
          displayName: '価格',
          cellFilter: 'currency : "￥" :0'
        },
        {
          field: 'from',
          displayName: '産地'
        },
        {
          field: 'ship',
          displayName: '出荷日',
          cellFilter: 'date: "yyyy年MM月dd日"'
        }
      ],
      data: [
        {
          cid: '1164',
          name: '幸水なし',
          price: 3240,
          from: '千葉県',
          ship: new Date(2015, 6, 28)
        },
        ...中略...
      ]
    };
  }]);

セルの値／スタイルを変更した結果

　UI Gridでは、デフォルトで、列ヘッダー右端のをクリックし、表示されたメニューから［Hide Column］で列を非表示にできます。enableHidingパラメーターをfalseにした場合には、この選択ができなくなります。

　cellFilterパラメーターでは、セル値に適用すべきフィルターを指定しています。利用できるフィルターについては、「AngularJS TIPS」などの記事を参照してください。

ソート機能を実装する

　ソート機能を組み込んで、列タイトルをクリックすることで、該当列を昇順⇔降順に交互に並べ替えることができます。

リスト4　ソート機能を実装したグリッド表（grid_sort.js）

angular.module('myApp', [ 'ui.grid'])
  .controller('MyController', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
    $scope.myGrid = {
      enableSorting: true,
      columnDefs: [
        {
          field: 'cid',
          displayName: '商品コード',
          cellClass: 'strong',
          enableHiding: false
        },
        {
          field: 'name',
          displayName: '商品名',
          enableSorting: false
        },
        ...中略...
      ],
      data: [
        {
          cid: '1164',
          name: '幸水なし',
          price: 3240,
          from: '千葉県',
          ship: new Date(2015, 6, 28)
        },
         ...中略...
      ]
    };
  }]);

　ソートを有効にするには、columnDefs／dataプロパティと同列に（便宜的に、グリッド全体に影響を及ぼすという意味で、グローバルパラメーターと呼びます）、enableSortingパラメーターにtrue（デフォルト）を設定します。

　特定の列でのみソート機能を無効にするならば、columnDefsパラメーターの該当する列定義でenableSortingパラメーターをfalseに設定してください。この例では商品名列のソートを無効化しています。

　ソート機能を有効にすると、列タイトルのクリックによって、該当列をキーにデータがソートされるようになります。また、各列タイトル右端のボタンをクリックすることで、［Sort Ascending］［Sort Descending］を選択することもできます。

 

列タイトルのクリックによって該当列をキーにソート